javascript - 来自 Prop 的 ReactJs 样式表行

Question

如果存在 Prop ，我正在尝试设置 tr 的背景样式:

我在我的一个专栏中传递这个 Prop :

<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

有人可以帮忙吗？

Answer 1

您只需限定 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 设置为任何字符串，它将为 truthy。