React的3种条件渲染方法(持续更新中....)

1.If/Else

class App extends React.Component {
  state = {
    text: '', 
    inputText: '', 
    mode: 'view',
  }
 handleChange = (e) => {
    this.setState({ inputText: e.target.value });
  }
  
  handleSave = () => {
    this.setState({text: this.state.inputText, mode: 'view'});
  }
 
  handleEdit = () => {
    this.setState({mode: 'edit'});
  }
 renderInputField() {
    if (this.state.mode === 'view') {
      return <div />;
    } else {
      return (
          <p>
            <input
              onChange={this.handleChange}
              value={this.state.inputText}
            />
          </p>
      );
    }
  }
 renderButton() {
    if (this.state.mode === 'view') {
      return (
          <button onClick={this.handleEdit}>
            Edit
          </button>
      );
    } else {
      return (
          <button onClick={this.handleSave}>
            Save
          </button>
      );
    }
  }


render() {
    return (
      <div>
        <p>Text: {this.state.text}</p>
        {this.renderInputField()}

        {this.renderButton()}
      </div>
    );
  }


}

2.三元运算符

{i>0?<div className="box">用三目运算符条件渲染</div>:''}

3.短路运算符

三元运算符在某些场景下可以更加简化。例如,当你要么渲染一个组件,要么不做渲染,你可以使用&&运算符。

不像&运算符,如果&&执行左侧的表达式就可以确认结果的话,右侧表达式将不会执行。

举个例子,如果左侧表达式结果为false(false && ...),那么下一个表达式就不需要执行,因为结果永远都是false。

在React中,你可以这样运用:

return (
    <div>
        { showHeader && <Header /> }
    </div>
);

如果showHeader结果为true,那么<Header />组件就会被返回;如果showHeader结果为false,那么<Header />组件会被忽略,返回的会是一个空div

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值