ReactJS - 屬性 (props)

React 允許開發者使用屬性建立動態和高階元件。每個元件都可以擁有類似於 HTML 屬性的屬性，並且每個屬性的值都可以使用屬性 (props) 在元件內部訪問。

例如，具有名稱屬性的 Hello 元件可以透過 this.props.name 變數在元件內部訪問。

<Hello name="React" />
// value of name will be "Hello* const name = this.props.name

React 屬性支援不同型別的屬性值。它們如下所示：

字串
數字
日期時間
陣列
列表
物件

使用 Props

當我們需要在元件中使用不可變資料時，我們只需將 props 新增到 reactDOM.render() 函式（在 main.js 中）並將其在元件內部使用即可。

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'));

輸出與之前相同。

狀態與 Props

以下示例展示瞭如何在應用中組合狀態和 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'));

結果將再次與前兩個示例相同，唯一不同的是我們資料來源，現在它最初來自狀態。當我們想要更新它時，我們只需要更新狀態，所有子元件都將更新。有關這方面的更多資訊，請參閱事件章節。

讓我們在本節中逐一學習以下概念。

列印頁面