ReactJS props簡介

props和state的主要區別是props是不變的。 這就是為什麼容器元件應該定義可以更新和更改的狀態，而子元件只應該使用props來傳遞狀態資料。

使用props

當我們在元件中需要不可變的資料時，可以在main.js中新增props到reactDOM.render()函式中，並在元件中使用它。

檔案：App.jsx -

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

檔案：main.js -

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
   from props..."/>, document.getElementById('app'));

export default App;

這將產生以下結果 -

預設props

我們也可以直接在元件建構函式中設定預設屬性值，而不是將其新增到reactDom.render()元素。

檔案：App.jsx -

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
App.defaultProps = {
   headerProp: "Header from props...",
   contentProp:"Content from props..."
}
export default App;

檔案：main.js -

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

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

輸出和以前一樣 -

State 和 Props

以下範例顯示如何在應用程式中組合State 和 Props。 在父元件中設定狀態並使用Props將其傳遞給元件樹。 在render函式內部，設定了在子元件中使用的headerProp和contentProp。

檔案：App.jsx -

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         header: "Header from props...",
         content: "Content from props..."
      }
   }
   render() {
      return (
         <div>
            <Header headerProp = {this.state.header}/>
            <Content contentProp = {this.state.content}/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

檔案：main.js -

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

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

結果會和前面兩個例子一樣，唯一不同的是我們資料的來源，現在來自state。 當想更新它時，只需要更新狀態，所有的子元件都會被更新。 更多關於這個在事件章節。