React / Redux 有条件地应用样式答案

【问题标题】：React / Redux conditionally applying styleReact / Redux 有条件地应用样式
【发布时间】：2017-08-23 23:14:19
【问题描述】：

在我的React & Redux 应用程序中，我正在尝试基于Redux 返回的state show/hide 一个div。这是我的代码：

<div 
    className="notify-success" 
    style={{  ({this.props.terms}) ? "" : "display: 'none'" }} 
>
    Saved successfully!
</div>

但它对我不起作用，而是抛出错误！

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

把条件放在值上，使用这个：

style={{'display': this.props.terms ? "" : 'none' }}

【讨论】：

【解决方案2】：

尝试使用类名以获得更好的实践

  classNames('foo', 'bar'); // => 'foo bar'
  classNames('foo', { bar: true }); // => 'foo bar'
  classNames({ 'foo-bar': true }); // => 'foo-bar'
  classNames({ 'foo-bar': false }); // => ''
  classNames({ foo: true }, { bar: true }); // => 'foo bar'
  classNames({ foo: true, bar: true }); // => 'foo bar'

参考此链接classnames

这将返回您生成的类名，您可以将其放入渲染方法中，并且随着您的变量更改，这将根据您的需要进行更新。

【讨论】：

【解决方案3】：

如果不需要，请不要渲染<div>：

render() {
    return { this.props.terms ?
             <div className="notify-success">
               Saved successfully!
             </div> : null 
           }
}

【讨论】：