javascript - 来自props的ReactJs样式表行

如果有道具，我正在尝试设置tr背景的样式：

我正在其中一列中传递道具：

<Column highlightRow="yes" />

这是我的表格行渲染：

 render: function () {

   var columns = this.props.columns;
   var data = this.props.data;
   //loop through columns looking for prop
   var styleCheck =  columns.map(function (column) {
        if (column.props.highlightRow) {

            var styles = {
                backgroundColor: 'pink'
            };
        }
    });

    return (
        <tr style={styles}>
            {this.getCellNodes()}
        </tr>
    );

}

我不断收到错误styles is not defined

谁能帮忙吗？

最佳答案

您只需要限定styles变量的范围即可看到它：

render: function () {

   var columns = this.props.columns;
   var data = this.props.data;
   var styles = {};
   //loop through columns looking for prop
   var styleCheck =  columns.map(function (column) {
        if (column.props.highlightRow) {

            styles = {
                backgroundColor: 'pink'
            };
        }
    });

    return (
        <tr style={styles}>
            {this.getCellNodes()}
        </tr>
    );

}

除此之外，当前，如果highlightRow设置为任何字符串，那将是事实。