Question

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

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

但它不适合我，而是抛出错误！

Answer 1

将条件置于值，使用此：

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

Answer 2

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

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

Answer 3

尝试使用类名进行更好的练习

  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

这将返回你生成的className，你可以将它放在render方法中，当你的变量发生变化时，它会根据你的需要进行更新。

React / Redux有条件地应用样式

3 个答案: