React 學習筆記之屬性 props

• 2020 年 1 月 5 日
• 筆記

React 的每一個組件都可以包含一些數據，這些數據一般情況下都是父組件傳遞進來的。這個過程就像我們給一個可變參數的函數傳遞參數一樣，只不過組件內部接受到這些參數時，都是在 this.props 這個成員中。該功能一般用於組件之間傳遞數據使用。

演示程式碼

import React, { Component } from 'react';  import ReactDOM from 'react-dom';    class Welcome extends Component {    render() {      return <h1>Hello, {this.props.name}</h1>;    }  }    class App extends Component {    render() {      return (        <div>          <Welcome name="Sara" />          <Welcome name="Cahal" />          <Welcome name="Edite" />        </div>      );    }  }    ReactDOM.render(    <App />,    document.getElementById('root')  );

程式碼解析

首先我們從入口的 ReactDOM.render 中將 App 組件作為主程式展示到介面上。而 App 組件中又使用了 Welcome 組件，在使用 Welcome 組件的同時我們給 Welcome 組件傳遞了一個 name 的屬性。且我們調用了三次 Welcome 組件，這樣 Welcome 組件就會被渲染三次，顯示三個不同的名字。

在 Welcome 組件內部很簡單，就是用一個 h1 標籤顯示了名字的資訊，而名字的資訊則使用了 {this.props.name} 訪問到我們傳遞進去的 name 屬性。最終效果如下：

注意事項

另外需要注意的是，props 裡面的數據只能只讀訪問，不應該去修改 props 裡面的數據。這是 React 固有的一些規則。