Javascript 在React.js中的组件之间传递变量

背景

我正在尝试将名为

style

的

变量中的
css类
名称传递给
tr
元素上的
className
。我认为我的问题在于我还没有掌握
道具的概念

基本上，我有一个
组件
是用
ES6
编写的，我想根据
子td
的值更改
tr的
css类

问题

用我现在的代码，我得到了

未定义样式

但是这确实是
console.log
所有适当的
css类
，因此我知道除了添加到
tr
标记的
className
中的实际
类
之外，一切都很好。由于某些原因，它没有将内部变量从
componentDidMount
传递到
render

问题

请向我解释如何在我的
React.js
组件中传递
变量

示例

    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>;
           }
    }

类TableDisplay扩展了React.Component{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
var style=“”；
var tCells=document.getElementsByTagName（“td”）；
对于（变量i=0；i

我尝试过的

我确实认为这可能是一个范围或关闭问题。所以我试过了

全球的

使样式设置成为全局变量。那是行不通的

这个

尝试使用此。样式设置。这也不管用

移动到渲染内部

我在渲染中移动了循环。当我这样做时，它将样式变量添加到
className
中，但只添加了
styleing=“”的第一个初始声明。因此，基本上，它只是让每个
tr
都有一个空间来存放您希望在组件中使用的
className
，以便您可以访问这些变量，这些变量在组件运行期间的不同时间被修改

创建
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.style
访问此状态，如下所示：

<tr className={this.state.styling}>



render
函数无法使用
style
变量的原因是它不在同一范围内。一旦
componentDidMount
运行完毕，变量
样式设置
就消失了。因此，React的状态允许您访问整个组件中的变量。
假设您的“批准”和“拒绝”文本来自
请求[key]。状态
。你就不能这样做吗：

{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>;

})}

{Object.keys（requests）.map（function（key）{
让style=“bg plain”；
如果（请求[键]。状态==“已批准”）{
style=“bg success”；
}else if（请求[键]。状态==“拒绝”）{
样式设置=“bg危险”；
}
返回
{请求[key].title}
{请求[key]。状态}
{requests[key]。在.slice（0,10）处创建了_}
{requests[key]。更新了_at.slice（0,10）}
;
})}
您的“批准”和“拒绝”文本是否来自请求[key]。状态还是请求[key]。标题？如果是这样，您是否尝试将其移动到渲染函数中，但与那些变量（而不是innerHTML）进行比较？我尝试过将其移动。我在问题的底部解释了结果。基本上，如果我从类名中删除样式，它将运行应用程序，并将所有正确的数据输出到控制台。但是当我在渲染中移动循环时，它只是在类名称点中为每个tr tagI添加了一个空格。我用你的解释更新了我的问题。请看我问题的底部，告诉我是否按照你的建议做了。我的状态没有定义汉克哈哈，天哪。我花了这么多时间试图弄清楚react的作用域是如何工作的，但我还是要说的是，我对显而易见的事实视而不见。我仍然担心为什么我不能得到工作的范围或道具。如果您对此有任何意见，请告诉我。@wuno来自您的“基于答案的示例”编辑。我可以理解为什么没有定义
这个.state.styleing
。由于您没有将ES6 arrow函数用作回调函数，因此
此
变量不在外部范围内。从ES5开始，人们喜欢将
var self=this
置于外部，然后在回调中使用
self.state.foo
。也许你应该看看这个：fo