父元件傳遞引數給子元件 (函式式元件)

function Son(props) {
  return (
    <div>
      <p>{props.message}</p>
      <p>{props.age}</p>
    </div>
  )
}
Son.defaultProps = { // Son元件預設的props值
  age: '666'
}
function App() {
  return (
    <div>
      <h1>App</h1>
      <Son message={'我是一段訊息'}></Son>
    </div>
  );
}

export default App;

• 函式式元件通過第一個引數props接收到父元件傳遞的內容
• 可以給子元件定義預設值，當父元件沒有傳遞props，子元件就會使用預設的props值

父元件傳遞引數給子元件 (類元件)

import React from "react";
class Son extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <p>{this.props.message}</p>
        <p>{this.props.age}</p>
      </div>
    )
  }
  static defaultProps = {
    age: 666
  }
}
class App extends React.Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <Son message={'我是一段訊息'}></Son>
      </div>
    )
  }

}

export default App;

• 類元件通過constructor的第一個引數props可以拿到父元件傳遞過來的引數
• 然後呼叫super將props傳遞給父類，父類內部實現了this.props = props
• 我們可以直接使用this.props來拿到父元件傳遞的引數
• 可以給類元件新增一個靜態defaultProps屬性，當父元件沒有傳遞props時使用defaultProps物件裡面的值

子元件傳遞引數給父元件 (類元件)

import React from 'react'

class Son extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    
 
return (
      <div>
        <p>Son</p>
        <button onClick={() => this.props.myFn(66)}>按鈕</button>
      </div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <Son myFn={(age) => this.myFn(age)}></Son>
      </div>
    )
  }
  myFn = (age) => {
    alert(age)
  }
}

export default App;

1. 子元件傳遞引數給父元件的思想是，父元件中定義一個方法並且這個方法可以接收引數，然後將該方法傳遞給子元件並且在子元件中呼叫，在呼叫這個方法的時候傳遞引數實現子元件給父元件通訊
2. 在父元件App中定義了一個箭頭函式myFN該函式接收一個引數age
3. 在父元件App中使用子元件Son時傳遞一個myFn的引數，myFn引數的取值是一個箭頭函式，這個箭頭函式中接收一個引數age，在執行箭頭函式體時，呼叫this.myFn並將引數傳遞進去