React 中的条件渲染可以使用逻辑运算符 ||渲染相同的内容时？答案

【问题标题】：Can conditional rendering in React use logical operator || when rendering the same content?React 中的条件渲染可以使用逻辑运算符 ||渲染相同的内容时？
【发布时间】：2021-03-16 23:49:38
【问题描述】：

代码执行以下操作 - 如果从下拉菜单中选择的项目是“pinpong”，那么它将显示 div 容器内容中的内容

在第二个组件中，如果从下拉菜单中选择的项目是“篮球”，它也会显示 div 容器内容。

但是，要显示的内容是相同的。那么有没有办法组合要渲染的组件使用逻辑运算符|| 可以消除重复代码的需要？

 
{this.props.selectedGame === 'pingpong' && (
          <div>
            <label>
             <p>How many games do you want to play?</p>
                    <input onChange={this.handleChangeInput} 
                    type="text"/>
             </label>
          </div>
     )}


{this.props.selectedGame === 'basketball' && (
          <div>
            <label>
             <p>How many games do you want to play?</p>
                    <input onChange={this.handleChangeInput} 
                    type="text"/>
             </label>
          </div>
   )}

【问题讨论】：

标签： reactjs conditional-rendering logical-or

【解决方案1】：

您可以使用ternary operator。

{
  this.props.selectedGame === "pingpong" ? (
    <div>
      <label>
        <p>How many games do you want to play?</p>
        <input onChange={this.handleChangeInput} type="text" />
      </label>
    </div>
  ) : (
    <div>
      <label>
        <p>How many games do you want to play?</p>
        <input onChange={this.handleChangeInput} type="text" />
      </label>
    </div>
  );
}

当然，如果您的 div 确实设置在同一位置，您可以使用 || 运算符

{
  (this.props.selectedGame === "pingpong" ||
    this.props.selectedGame === "basketball") && (
    <div>
      <label>
        <p>How many games do you want to play?</p>
        <input onChange={this.handleChangeInput} type="text" />
      </label>
    </div>
  );
}

你的问题：

但是，要显示的内容是相同的。那么有没有办法将要渲染的组件与逻辑运算符 || 结合起来？这将消除对代码如此重复的需要？

如果它们完全相同，我不明白为什么你需要在这里切换组件。你想解决什么问题？

您提到这是两个选择，您只是将同一组件的显示加倍。在这种情况下，只需将 div 设为自己的组件并将其显示在选择下方：

function MyGamesInput() {
    return (
        <div>
            <label>
                <p>How many games do you want to play?</p>
                <input onChange={this.handleChangeInput} type="text" />
            </label>
        </div>
    );
}

<SelectOne/>
{
    this.props.selectedGame === "pingpong" && <MyGamesInput />
}

<SelectTwo/>
{
    this.props.selectedGame === "basketball" && <MyGamesInput />
}

【讨论】：

【解决方案2】：

在渲染条件变得相当长的这些情况下，我经常做的是创建一个处理条件并返回布尔值的函数


const shouldRenderGame = () => {
  const {selectedGame} = this.props;
  return selectedGame === "pingpong" || selectedGame === "basketball"
}

{shouldRenderGame() && (
          <div>
            <label>
             <p>How many games do you want to play?</p>
                    <input onChange={this.handleChangeInput} 
                    type="text"/>
             </label>
          </div>
     )}

【讨论】：

【解决方案3】：

为了简单的使用，你可以这样做。

{this.props.selectedGame === 'pingpong' ? (
          <div>
            <label>
             <p>How many games do you want to play?</p>
                    <input onChange={this.handleChangeInput} 
                    type="text"/>
             </label>
          </div>
     ) : this.props.selectedGame === 'basketball' ? <div>
            <label>
             <p>How many games do you want to play?</p>
                    <input onChange={this.handleChangeInput} 
                    type="text"/>
             </label>
          </div> : null}

【讨论】：

Charles 这是否意味着不可能使用 ||操作员？比如this.props.selectedGame === 'pingpong' || this.props.selectedGame === '篮球' ?
对不起，我误解了你的问题。我认为 Dominik 提供了正确的答案。