背景
我正在尝试将名为variable的{{1}}中的styling名称传递到className元素上的tr。我认为我的问题是我还没有掌握props的概念。
基本上我在component中写了ES6，我想根据css class的值更改tr的{{1}}。< / p>
问题
使用我当前的代码
样式未定义
但这会child td所有适当的console.log，所以我知道一切都很好，减去css class添加到class的{{1}}标签。由于某种原因，它没有将变量从className传递到tr。
问题
请向我解释如何在componentDidMount render variables中传递React.js？
示例
component / components我尝试过什么
我确实认为这可能是范围或关闭问题。所以我试过了。
全球
使样式成为全局变量。那没用。
此
试图使用this.styling。那也行不通。
移动内部渲染
我在渲染中移动了循环。当我这样做时，它将样式变量添加到 class TableDisplay extends React.Component{
constructor(props) {
super(props);
}
componentDidMount() {
var styling = " ";
var tCells = document.getElementsByTagName("td");
for (var i = 0; i < tCells.length; i++) {
if(tCells[i].innerHTML == "Approved") {
console.log("bg-success");
styling = "bg-success";
} else if (tCells[i].innerHTML == "Denied") {
console.log("bg-danger");
styling = "bg-danger";
} else {
console.log("bg-plain");
styling = "bg-plain";
}
}
}
render() {
return <div><table className="table">
<tr className="seperate"><td>Title</td><td>Status</td><td>Created</td><td>Updated</td><td>Delete</td></tr>
{Object.keys(requests).map(function(key) {
// Problem appears to be here
return <tr className={styling}>
<td>{requests[key].title}</td>
<td>{requests[key].status}</td>
<td>{requests[key].created_at.slice(0, 10)}</td>
<td>{requests[key].updated_at.slice(0, 10)}</td>
<td><a href="">Delete</a></td>
</tr>;
})}
</table>
</div>;
}
}
但仅添加className的第一个初始声明。所以基本上它只是让每个styling = " ";都有tr的空间。
答案 0 :(得分：1)
假设您的＆＃34;已批准＆＃34;和＃34;拒绝＆＃34;文字来自requests[key].status。你不能做这样的事情：
{Object.keys(requests).map(function(key) {
let styling = "bg-plain";
if (requests[key].status === "Approved") {
styling = "bg-success";
} else if (requests[key].status === "Denied") {
styling = "bg-danger";
}
return <tr className={styling}>
<td>{requests[key].title}</td>
<td>{requests[key].status}</td>
<td>{requests[key].created_at.slice(0, 10)}</td>
<td>{requests[key].updated_at.slice(0, 10)}</td>
<td><a href="">Delete</a></td>
</tr>;
})}
答案 1 :(得分：0)
您需要在组件中使用state，以便您可以访问在组件lifecycle期间的不同时间修改的变量。
创建TableDisplay时，在构造函数中设置初始状态，如下所示：
class TableDisplay extends React.Component{
constructor(props) {
super(props);
this.state = {styling: ""};
}
并根据您componentDidMount函数中的条件，使用setState函数更改此状态，如下所示：
this.setState({ styling: "what ever you want to change it to"});
并使用this.state.styling函数中的render来访问此状态，如下所示：
<tr className={this.state.styling}>
您的render函数无法使用styling变量的原因，因为它不在同一范围内。运行componentDidMount后，变量styling消失。因此，React的状态允许您访问整个组件中的变量。