React(4) - 條件渲染


Posted by TempuraEngineer on 2022-10-13

目錄


inline if 與 &&

假設現在有一個組件,可以按鈕可以控制是否顯示

class Hello extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() { 
    return (
      <div className={this.props.className} onClick={this.props.onClick}>
        <h1>hello, {this.props.name}</h1>
      </div>
    );
  }
}

使用&&運算子可以達到inline if的功效,對應的Vue寫法是v-if

class App extends Component {
  state = {
    isHelloOn:true
  };

  // methods
  toggle = () => {
    this.setState({
      isHelloOn:!this.state.isHelloOn,
    })
  }

  render(){
    return (
      <div className="container">
        <h1>{`isHelloOn: ${this.state.isHelloOn}`}</h1>

        <button className='mb-3 p-2 bg-blue-500 text-white rounded' onClick={this.toggle}>toggle</button>

        {this.state.isHelloOn && <Hello name="Tempura" className="text-yellow-400"></Hello>}
      </div>
    )
  };
}

export default App;

另外也可以return null來避免組件被渲染

class Hello extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() { 
    return this.props.isShow? (
      <div className={this.props.className}>
        <h1>hello, {this.props.name}</h1>
      </div>
    ) : null;
  }
}

class App extends Component {
  state = {
    isHelloOn:true
  };

  // methods
  toggle = () => {
    this.setState({
      isHelloOn:!this.state.isHelloOn,
    })
  }

  render(){
    return (
      <div className="container">
        <h1>{`isHelloOn: ${this.state.isHelloOn}`}</h1>

        <button className='mb-3 p-2 bg-blue-500 text-white rounded' onClick={this.toggle}>toggle</button>

        <Hello name="Tempura" className="text-yellow-400" isShow={this.state.isHellOn}></Hello>
      </div>
    )
  };
}

export default App;


inline if-else 與 三元運算子

又多了個組件,可以按鈕可以切換他們

class Goodbye extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() { 
    return (
      <div className={this.props.className}>
        <h1>Goodbye, {this.props.name}</h1>
      </div>
    );
  }
}

使用三元運算子可以達到inline if-else的功效,對應的Vue寫法是v-if + v-else

class App extends Component {
  state = {
    isHelloOn:true
  };

  // methods
  toggle = () => {
    this.setState({
      isHelloOn:!this.state.isHelloOn,
    })
  }

  render(){
    return (
      <div className="container">
        <h1>{`isHelloOn: ${this.state.isHelloOn}`}</h1>

        <button className='mb-3 p-2 bg-blue-500 text-white rounded' onClick={this.toggle}>toggle</button>

        {this.state.isHelloOn? <Hello name="Tempura" className="text-yellow-400"></Hello> : <Goodbye name="Tempura" className="text-blue-400"></Goodbye>}
      </div>
    )
  };
}

export default App;


參考資料

React - 條件 Render


#React #條件渲染







Related Posts

API 留言板練習-Part1 : 打造後端 API

API 留言板練習-Part1 : 打造後端 API

1. ECMAScript - 前言

1. ECMAScript - 前言

[Day 04] 樣板模式,合成模式,狀態模式,代理模式

[Day 04] 樣板模式,合成模式,狀態模式,代理模式


Comments