父组件传递参数给子组件 (函数式组件)

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 并将参数传递进去