React 的傳遞＆接收屬性的方式

傳遞

  <Person name=”Jack” age={18} />
           ↓                 ↓ 
  類 HTML 的自訂元素     
                     傳遞的屬性, 只要不是字串都要用 { } 包起來傳遞

接收

class 接收

  class Person extends React.Component {

    render () {

      const {name, age} = this.props;   ==> 物件解構式

    }                         |                        
  }                           |                                                                                             
                              ↓ 
       讓父元件傳遞資料給子元件, 而元件內部可以透過 this.props 取得該值。

範例：

class Foot extends React.Component {
  render() {
    return (
      <div>
        { this.props.name }'s age is { this.props.age }.
      </div>
    );
  }
}

class Person extends React.Component {
  render() {
    const { sex, ...more } = this.props;   ==> 接收屬性 , 物件解構式
      return (
        <div>
           hello
           <Foot {...more} />
        </div>
      );
   }
 }

ReactDOM.render(  

  <Person name="Jack" age={18} sex=" male" />,  ==> 把 JSX 元素掛載到網頁上

  document.getElementById('app')  ==> 掛載到哪個 DOM 元素
                             ↓
);                抓取 HTML 中的 DOM 元數