Question

我有一个React组件需要有条件地渲染其他两个组件之一，如下所示：

render() {
  const displayMode = this.props.condition ? 'a' : 'b';

  return (
     <div>
        {{
           a: <AComponent />,
           b: <BComponent userData={this.props.userData} />
        }[displayMode]}
     </div>
  );
}
...

BComponent需要AComponent不具备的数据，因此在AComponent渲染时数据不可用。意外的行为是，即使只有AComponent应该渲染，我也只能获得有关BComponent所需的缺失数据的错误。

简而言之，当我使用对象枚举时，两个组件总是呈现。

如果我将其切换为以下内容：

render() {
  const displayMode = this.props.condition ? 'a' : 'b';

  return (
     <div>
        {displayMode === 'a' && (
           <AComponent />
        )}

        {displayMode === 'b' && (
           <BComponent />
        )}
     </div>
  );
}
...

然后我没有遇到这个问题，只有正在呈现的预期组件，我没有收到有关其他组件所需数据的任何错误。

所以，这有效，但我更喜欢使用对象枚举的更干净的代码。我的问题是为什么奇怪的行为，这是预期的吗？

谢谢！

Answer 1

2个解决方案之间的区别在于执行顺序。在第一种情况下，一个带有2个键的新对象a＆amp;创建b以及相应的组件func_int 5 func_char A和AComponent，然后取出密钥匹配BComponent的值。在第二种情况下，首先验证displayMode，并根据其值，将采用或不采用第二个条件。它类似于执行：displayMode - 第二个条件被忽略，因为它没有通过第一个条件。

使用enum进行条件渲染时，反映渲染不可见的组件

1 个答案: