React的props與state(上)

props 的資料結構就是一個物件JavaScript Object，就像是var props={name:'jacky',age:29}由父元件呼叫子元件時賦與子元件數值，在子元件中props不可以改變。
取用參數時用this.props.變數名稱，即可取用。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import ButtonTest from './buttonTest';

ReactDOM.render(
  <div>
    <ButtonTest name="Andy" age="21" />
  </div>
  ,document.getElementById('root')
);

子元件ButtonTest

import React from "react";

class ButtonTest extends React.Component {
      constructor(props){
        super(props);
		console.log('message',this.props.name);
		}

      
      render() {
          return <button onClick={this.handleEdit}>编辑</button>
      }

}

export default ButtonTest;

在index.js中會讀取ButtonTest元件，並傳入二個參數name及age到ButtonTest元件。

<ButtonTest name="Andy" age="21" />

有傳遞參數到子元件的話，就一定要有constructor(props){}來接受，不論你傳幾個參數過來，只要一個props來接受就行了。
要取用的話就用this.props.name來取用就行了。