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

Question

代码执行以下操作 - 如果从下拉菜单中选择的项目是“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>
   )}

Answer 1

您可以使用三元运算符。

{
  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 设为自己的组件并将其显示在 select 下方：

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 />
}

Answer 2

在这些渲染条件变得相当长的情况下，我经常做的是创建一个 function 来处理该条件并返回一个 boolean

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>
     )}

Answer 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}