React / Redux 有条件地应用样式

Question

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

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

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

Answer 1

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

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

Answer 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'

参考这个linkclassnames

这将 return 您生成的类名，您可以将它放在 render 方法中，当您的变量发生变化时，它会根据您的需要进行更新。

Answer 3

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

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

React / Redux 有条件地应用样式

React / Redux conditionally applying style

reactjs

redux

react-redux