Рендеринг компонентов React условно

Question

Я изо всех сил пытаюсь сделать определенный фрагмент реагирующей компоненты. Вот как выглядит мой компонент:

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

Я хочу отобразить тот же фрагмент, когда 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
  }
)

Теперь проблема в том, как я могу справиться с этими двумя одновременно. Я пытался использовать логические операторы, но, похоже, не работает.

Answer 1

Попробуйте это.

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

}

Answer 2

Думайте о троичных операторах как о сокращенных операторах 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>
)

Answer 3

Вы забыли обернуть другой компонент в один div. Используйте это

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


 }

Answer 4

Вы можете вернуть только один элемент из условных операторов. Оберните их в div или React Fragment

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

Answer 5

Попробуйте многопрофильный оператор , как показано ниже.

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>