Reactjs React中的条件呈现在呈现相同内容时是否可以使用逻辑运算符| |？

代码执行以下操作-如果从下拉菜单中选择的项目为“精确定位”，则它将显示div容器内容中的内容

在第二个组件中，如果从下拉菜单中选择的项目是“basketball”，那么它也将显示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>
   )}

{this.props.selectedGame==='pingpong'&&(
你想玩多少游戏

)}
{this.props.selectedGame==='basketball'&&(
你想玩多少游戏

)}

您可以使用一个

关于你的问题：

但是，要显示的内容是相同的。那么，有没有一种方法可以将要呈现的组件与逻辑运算符| |结合起来，从而消除代码重复的需要

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

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

您提到这是两次选择，您只需将同一组件的显示加倍。在这种情况下，只需将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 />
}

函数MyGamesInput（）{
返回(
你想玩多少游戏

);
}
{
this.props.selectedGame==“乒乓球”&&
}
{
this.props.selectedGame==“basketball”&&
}

为了便于使用，您可以这样做

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

{this.props.selectedGame=='pingpong'(
你想玩多少游戏

)：this.props.selectedGame===“basketball”？
你想玩多少游戏

：null}

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

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

常量shouldRenderName=（）=>{
const{selectedGame}=this.props；
返回selectedGame==“乒乓球”| selectedGame==“篮球”
}
{shouldRenderName（）&&(
你想玩多少游戏

)}

Charles这是否意味着无法使用| |运算符？例如：this.props.selectedGame==“乒乓球”| this.props.selectedGame==“篮球”？对不起，我误解了你的问题。我认为多米尼克给出了正确的答案。

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