[React學習筆記] React Component的inline style

inline style

記得在 Functional Component 寫法中撰寫 CSS inline style 的參數是寫在 render() 方法中直接建立一個 style 變數裡面存著 CSS 參數，最後在 JSX 中直接嵌入，其中也可以動態的修改 style 的樣式，像範例中是點擊按鈕會變換 style 中的 backgroundColor 背景顏色為紅。

此外 <h1> 標籤是使用動態的類別名稱來定義 inline style，此類別名稱(red 與 bold)已事先定義好在外部的 CSS 檔案中，然而在 JSX 中可以動態的 push 類別名稱到陣列中，最後使用 join 將陣列字串化且以空白區隔，所以最後會變成 className= 'red bold'。

-HTML

<div id="app"></div>

.red{
  color: red;
}
.bold{
  font-weight: bold;
}

class App extends React.Component {

  state = {
    showPerson: false
  }
  showPerson= ()=> {
    this.setState({showPerson:!this.state.showPerson});
  }

  render() {
    const style = {
      backgroundColor: 'red',
      font: 'inherit',
      border: '1px solid blue',
      padding: '8px',
      cursor: 'pointer'
    };
    
    const classes=['bold'];
    if(this.state.showPerson){
      classes.push('red');
    }
    
    
    let persons = null;
    if (this.state.showPerson) {
      persons = (
        <h1 className={classes.join(' ')}>Hello World! Andy</h1>
      );
      style.backgroundColor='green';
    }
    
    return (
      <div className="App">
         <button
          style={style}
          onClick={this.showPerson}>Switch Name</button>
        {/* 按鈕顯示資料使用js判斷 */}
        {persons}
      </div>

    );
  }
}

ReactDOM.render(<App/>, document.querySelector('#app'));