有条件地渲染 React 组件

Question

I am struggling to to render certain fragment of react component. This is how my component looks like:

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

I want to render the same fragment when showControl is true also. Something like this:

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

Now the problem is how can I handle these two together at a time. I tried to use logical operators but seems not working.

Answer 1

Try multi ternary operator like shown below.

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>

Answer 2

You forget to wrap else component in single div. Use this

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

By the way You can use if conditions to make your life simple like:

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 3

You can only return one element from conditional statements. Either wrap them in div or 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 4

Think of Ternary Operators as just shortened if statements, using || should fix your problem:

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 5

Try this.

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

}