Javascript 渲染组件会有条件地作出反应

我正在努力渲染react组件的某些片段。这就是我的组件的外观：

import XYZ from './XYZ.js';

class ABC extends React.Component{
  constructor(props, context){
    super(props, context);
      this.state = {
        showXYZ: false,
        showControl: false
      }
    }

  onshowClick = () => {
    this.setState({ showXYZ: true });
  };

  oncontrolClick = () => {
    this.setState({ showXYZ: true });
  };

  render() {
    return(
      {
        this.state.showXYZ
          ? <XYZ />
          : <div>
            <Button onClick={this.onshowClick}>SHOW</Button>
            </div> 
          <h1>Some text</h1>
          <p> More text </p>}
    )
  }
}

从“/XYZ.js”导入XYZ；
类ABC扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
showXYZ：错，
showControl:false
}
}
onshowClick=（）=>{
this.setState（{showXYZ:true}）；
};
OnControl单击=（）=>{
this.setState（{showXYZ:true}）；
};
render（）{
返回(
{
this.state.showXYZ
? 
: 
显示
一些文本
更多文本
}
)
}
}

当showControl也为true时，我希望呈现相同的片段。大概是这样的：

return(
  {
    this.state.showControl
      ? <XYZ click = {this.props.oncontrolClick} />
       <div>
        <Button onClick={this.onshowClick}>SHOW</Button>
      </div>
      <h1>Some text</h1>
      <p> More text </p> :null
  }
)

返回(
{
this.state.showControl
? 
显示
一些文本
更多文本
：空
}
)

现在的问题是，我如何同时处理这两个问题。我尝试使用逻辑运算符，但似乎不起作用。

尝试如下所示

this.state.showXYZ ? <XYZ /> :  this.state.showControl ? <XYZ  click = {this.props.oncontrolClick} /> : 
  <div>
  <Button onClick={this.onshowClick}>SHOW</Button>
  </div>
  <h1>Some text</h1>
  <p> More text </p>
        <div>
           <Button onClick={this.onshowClick}>SHOW</Button>
        </div> 
       <h1>Some text</h1>
       <p> More text </p>

this.state.showXYZ？：这个.state.showControl？：
显示
一些文本
更多文本

显示
一些文本
更多文本

您忘记将else组件包装在单个div中。请使用此选项

<div>
  <div>
     <Button onClick={this.onshowClick}>SHOW</Button>
  </div>
  <h1>Some text</h1>
  <p> More text </p>
</div>

显示
一些文本
更多文本

顺便说一下，您可以使用if条件使您的生活变得简单，如：

render(){
if(this.state.showXYZ ||  this.state.showControl)
return(<XYZ click={this.state.showControl? this.props.oncontrolClick : null}/>) 

else 
{
return(
<div>
    <div>
      <Button onClick={this.onshowClick}>SHOW</Button>
    </div> 
    <h1>Some text</h1>
    <p> More text </p>
</div>
)
}


 }

render（）{
if（this.state.showXYZ | | this.state.showControl）
返回（）
其他的
{
返回(
显示
一些文本
更多文本

)
}
}

您只能从条件语句返回一个元素。用div或React片段包装它们

return(
 <div>
  {
   this.state.showControl ? <XYZ  click = {this.props.oncontrolClick} /> :
   <div>
      <div>
      <Button onClick={this.onshowClick}>SHOW</Button>
      </div>
      <h1>Some text</h1>
      <p> More text </p>
   </div>
  }
 </div>
)

返回(
{
这个.state.showControl？：
显示
一些文本
更多文本

}
)

将三元运算符看作是缩短的if语句，使用| |应该可以解决您的问题：

return(
  <div>
    { this.state.showControl || this.state.showXYZ 
      ? <XYZ click={this.props.oncontrolClick} /> : 
      <div>
        <Button onClick={this.onshowClick}>SHOW</Button>
      </div>
      <h1>Some text</h1>
      <p> More text </p>}
    } 
  </div>
)

返回(
{this.state.showControl | | this.state.showXYZ
?  : 
显示
一些文本
更多文本
}
} 
)

试试这个

 render() {
      return (
    this.state.showXYZ || this.state.showControl
      ? <XYZ click={this.state.showControl?this.props.oncontrolClick:()=>{}}/>
      : <React.Fragment><div>
        <Button onClick={this.onshowClick}>SHOW</Button>
        </div> 
      <h1>Some text</h1>
      <p> More text </p></React.Fragment>
)

render（）{
返回(
this.state.showXYZ | | this.state.showControl
? {}}/>
: 
显示
一些文本
更多文本

)

---

}

如果其他方法是可能的最佳解决方案，我想是的。但请参见状态showXYZ，我要渲染XYZ。但是对于showControl状态，除了作为道具传递oncontrolClick函数之外，我还需要呈现JSX。正如你在我的例子中看到的。在您的解决方案中，它将返回状态的XYZ和JSX if else条件我也更新了我的问题！！你能据此演示吗！！您的意思是，您想显示showYXZ或showControl是否为真。否则，当state showXYZ为true时，我想呈现XYZ，当state showControl变为true时，我想将一些函数作为prop传递给XYZ，并呈现组件ABC的JSX，如我的示例所示，如果为false，则不执行任何操作。您的意思是，对于showXYZ，您希望为showControl显示

，而对于showControl，您希望显示