ReactJs样式表行从props

ReactJs style table row from props

本文关键字：props 样式 ReactJs      更新时间：2023-09-26

我试图样式我的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

有人能帮忙吗?

您只需要将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设置为任意字符串都为真。

相关文章：