Question

我必须根据数据动态地给我的表行。

如果我的this.props.data.status=='Succcess'那么该行应为绿色。

如果我的this.props.data.status=='Failure'那么该行应为红色。

如果我的this.props.data.status=='Inprogress'那么该行应为黄色。

我能够用角度ng-class="{red: t.status == 'Failure',green: t.status == 'Success',amber: t.status == 'Inprogress'}"做到这一点你能帮助我吗？

Answer 1

您可以使用classnames包并像

一样使用它

import classnames from 'classnames'

然后在渲染

render() {
     const {data: {status}} = this.props;
     const rowClassNames = classnames({
         red: status == 'Failure',
         green: status == 'Success',
         amber: status == 'Inprogress'
     })

     return (
         <div className={rowClassNames}>XYZ</div>
     )

}

Answer 2

有很多方法可以做到这一点，也许最简单的方法是创建一个对象来将status映射到className：

const statusToClassName = {
    Success: "green",
    Inprogress: "blue",
    Failure: "red"
};

然后在你的render方法中：

render() {
    return (
        <div className={statusToClassName[this.props.data.status]}>
            ...
        </div>
    );
}

根据道具反应改变className

2 个答案: