0

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

3 回答 3

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

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 />
}
于 2020-12-04T22:49:03.970 回答
0

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


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>
     )}
于 2020-12-05T00:21:45.683 回答
-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>
     ) : 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}
于 2020-12-04T22:49:30.657 回答