使用 enum 进行条件渲染时 React 渲染不可见组件

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个key a & b，以及对应的组件AComponent和BComponent，然后取出key匹配的值displayMode。在第二种情况下，首先验证 displayMode ，并根据其值，是否采用第二个条件。它类似于执行： !!undefined && undefined.raiseNoError - 第二个条件被忽略，因为它没有通过第一个条件。

使用 enum 进行条件渲染时 React 渲染不可见组件

React rendering invisible components when using enum for conditional rendering

javascript

conditional

reactjs