react 组件通信 —— 父子传值 【 函数式/类式 】

1、函数式组件通信

父子间通信 —— 父传子

 父组件

export default function father() {
  return (
    <div style={{width:'400px',height:'200px',background:'pink',marginLeft:'500px'}}>
     我是父组件
     <hr />
     <Son name={"韩小刀"}/>
    </div>
  )
}

子组件

export default function son(props) {
  return (
    <div style={{width:'200px',height:'100px',background:'lightgreen'}}>
      我是子组件
      <hr />
      我接受到的父组件的值是:{props.name}
    </div>
  )
}

如下图所示：

 父子间通信 —— 子传父

父组件

export default function father() {
  // 父组件的数据
 const [data,setData] = useState('')
  
// 父组件传给子组件的方法
 const onMessageChange = (message) => {
   setData(message)
 }

  return (
    <div style={{width:'400px',height:'200px',background:'pink',marginLeft:'500px'}}>
     我是父组件
     <div>接收子组件的数据:{data}</div>
     <hr />
     <B sendMessageData={onMessageChange}/>
    </div>
  )
}

 子组件

export default function son({sendMessageData}) {

//子组件操作 给父组件传数据
  const handleData=()=>{
    sendMessageData('韩小刀')
  }
  return (
    <div style={{ width: "200px", height: "100px", background: "lightgreen" }}>
      我是子组件
      <hr />
     <button onClick={handleData} >点我给父组件传数据</button>
    </div>
  );
}

 如下图所示：

 2、类式组件通信

父子间通信 —— 父传子

 父组件

export default class Father extends Component {
  //父组件的状态数据
  state = {
    name:'韩小刀'
  }
  render() {
    return (
      <div style={{width:'400px',height:'200px',background:'pink',marginLeft:'500px'}}>
       我是父组件
     <hr />
     <Son changeDataMessage={this.state.name}/>
    </div>
    )
  }
}

  子组件

export default class Son extends Component {
  render() {
    //接收到父组件的数据
    const {changeDataMessage} = this.props
    return (
      <div style={{ width: "200px", height: "100px", background: "lightgreen" }}>
        我是子组件
        <hr />
        接收到的数据：{changeDataMessage}
      </div>
    );
  }
}

 如下图所示：

 父子间通信 —— 子传父

  父组件

export default class Father extends Component {
  //state写法一
  // constructor(props) {
  //   super(props);
  //   // 初始化状态
  //   this.state = {
  //     childMessage: "",
  //   };
  // }

  //state写法二
  state = {
    name: "",
  };

  changeDataMessage = (message) => {
    this.setState({ name: message });
  };
  render() {
    return (
      <div style={{width: "400px",height: "200px",background: "pink",marginLeft: "500px",}}>
        我是父组件 接收到子数据：{this.state.name}
        <hr />
        <B changeDataMessage={this.changeDataMessage} />
      </div>
    );
  }
}

  子组件

export default class Son extends Component {
  handleMessageData = () => { 
      this.props.changeDataMessage('韩小刀')  
  }
  render() {
    return (
      <div style={{ width: "200px", height: "100px", background: "lightgreen" }}>
        我是子组件
        <hr />
        <button onClick={this.handleMessageData}>点我给父组件传数据</button> 
      </div>
    );
  }
}

 如下图所示：