react 开始 六 条件渲染

function In (props)
{
  return <div>
    111
    </div>
  
}
function Out (props)
{
  return <div>
    000
    </div>
}
function InOut(props)
{
  const v=props.value;//根据v决定渲染谁
  return <div>
    {
      v?<Out />:<In />
    }
    </div>
}
class M extends React.Component
{
  constructor(props)
  {
    super(props);
    this.state={
      value:this.props.value
    }
  }
  handleClick()
  {
    
    const v=this.state.value;
    this.setState(
      {
        value:!v//简单点 true/false随意切
      }
    )
  }
  render()
  {
    var styl={
      width:'100px',
      height:'30px',
    }
    return <div>
      <InOut value={this.state.value} />{/*这里就把更新的state用上了*/}
      <button style={styl} onClick = {(e)=>this.handleClick(e)} ></button>
      </div>
  }
}
var a=true
ReactDOM.render(
  <M value={a} />,
  document.getElementById('example')
);