React-(五-3)組建進階：動態控制樣式className跟style

直接不 render

假設想要讓圖片動態顯示、隱藏，第一種方法是設定一個型態為布林值的變數，依據值的 true 或 false，搭配三元運算式決定是否要 render 出這個元素。

//Main.js

import React,{Component} from "react";
import picture from "./image/test.png";

class MainPage extends Component{
    state = {
      visable:true,
    };
    toggle = () =>{
      this.setState({
        visable: !this.state.visable,
      });
    };
    render(){
      const {visable} = this.state;
      return (
        <div>
          <button onClick={this.toggle}>Toggle</button>
          <hr/>
          {visable?<img src={picture}/>:null}
        </div>
      )
    }
}

export default MainPage;

又或者，用稍微更簡潔的方式取代三元判斷式

//三元判斷式
{visable ? <img src={picture}> : null}

//更簡化一些
{visable && <img src={picture}>}

在上述兩個做法中，都是採取直接不 render 出 image 的方式，也就是說當 visable 為 false 時，在 DOM 元素中是直接沒有畫出這個 image。

如果情況是一定要 render 出這個 image，那就可以採用改變 scc 樣式來決定顯示、隱藏，因此就必須動態綁定 style。

動態綁定 style

補：在 JSX 中，style 是一個物件

在 image 上面綁定 style 屬性，而 style 屬性綁定一個物件，在這個物件中就可以定義 display 樣式，樣式一樣採用三元判斷是的做法。

特別注意，在第 10 行中的連續兩個大括號，第一個外面的大括號代表 JSX 綁定值的表示，第二個裡面的大括號代表它是一個物件

//Main.js
// ...略
render(){
  const {visable} = this.state;
  return (
    <div>
      <button onClick={this.toggle}>Toggle</button>
      <hr/>
      <img 
          style={{display:visable?'block':'none'}}
          src={picture}/>
    </div>
  )
}

也可以直接將 style 屬性綁定的物件，直接在外面宣告成一個物件型態的變數 pictureObj

//Main.js
// ...略
render(){
  const {visable} = this.state;
  const pictureObj = {
    display:visable?'block':'none'
  }
  return (
    <div>
      <button onClick={this.toggle}>Toggle</button>
      <hr/>
      <img 
          style={pictureObj}
          src={picture}/>
    </div>
  )
}

查看 DOM 元素的變化，可以看到顯示跟隱藏時，image 都有被 render 出來，只是他的樣式 display 改變了。

動態綁定 className

先在 css 檔案中定義好 class 的樣式

/* main.css */
.image{
    display:block;
}
.hide{
    display:none;
}

第 4 行，引入 css 檔案
第 17 行，宣告一個型態為字串的變數，並將該變數當作第 22 行 className 屬性綁定的值

//Main.js
import React,{Component} from "react";
import picture from "./image/test.png";
import "./style/main.css";

class MainPage extends Component{
    state = {
      visable:true,
    };
    toggle = () =>{
      this.setState({
        visable: !this.state.visable,
      });
    };
    render(){
      const {visable} = this.state;
      const pictureClass = visable ?"image":"image hide"
      return (
        <div>
          <button onClick={this.toggle}>Toggle</button>
          <hr/>
          <img className={pictureClass} src={picture}/>
        </div>
      )
    }
}

export default MainPage;

因為有重複的 class ，也可以改用字串模板的方式

const pictureClass = `image ${visable?'':hide}`