在render方法中使用props作为更改UI的条件？

Question

我有一个div，它的初始状态为“ xyz”类。

现在我的全局redux状态内部发生了一些变化，并且我在render方法中获得了道具，例如

    render(){ 
      if(this.props.privateMode) { div.class = "abc"; }
       return ( <div/> )
    }

这是在全局状态（redux）发生更改时为div更新类的正确方法吗？

Answer 1

const { privateMode } = this.props;
    <div className={`test ${privateMode ? 'abc' : 'xyz'}`}>
     ...
    </div>

或使用Classnames包

const privateModeClass = className('test', {
    'abc': privateMode,
    'xyz': !privateMode,
  });
<div clasName={privateModeClass} />

Answer 2

这是一个两部分的问题。

1. 如何处理类更新。

   • className更新请参见上面的答案。

2. 如何处理应用的重新呈现

   • 每当Redux存储更新时，都会触发应用程序的重新呈现。您可以直接在render方法中获取这些更新，因为道具将被更新。或者，在componentWillReceiveProps方法中，您可以获取nextProps并将它们与当前props进行比较，并决定是否要以某种方式处理它。