React React组件之间的通信方式

组件通信

1 组件的props

Props 是组件的配置。

props 由父组件传递给子组件，并且就子组件而言，props 是不可变的。

1.1 作用

• 接收传递给组件的数据

1.2 组件标签属性来传递数据

• 通过给组件标签添加属性的方式传递数据。

  ReactDOM.render(<Person name="Silly" age={
       21} />, document.getElementById('root'))
  

1.3 函数组件和类组件来接收数据

• props是一个对象。
  • 函数组件：通过参数props接收数据。
  • 类组件：通过this.props接收数据。

// 1、函数组件接收数据---通过参数props接收
import React from 'react';
import ReactDOM from 'react-dom';

const Person = (props) => {
   
  console.log(props);
  return (
    <div>
      <h1>props:{
   props.name}</h1>
      <h1>props:{
   props.age}</h1>
    </div>
  )
}
//传递数据name、age
ReactDOM.render(<Person name="Silly" age={
   21} />, document.getElementById('root'))

// 2、类组件接收数据---通过this.props接收
import React from 'react';
import ReactDOM from 'react-dom'; 

class Person extends React.Component {
   
  render() {
   
    return (
      <div>
        <h1>类props:{
   this.props.name}</h1>
        <h1>类props:{
   this.props.age}</h1>
      </div>
    )
  }
}
//传递数据name、age
ReactDOM.render(<Person name="Silly" age={
   21} />, document.getElementById('root'))

1.4 props特点

1. 可以给组件传递任意类型的数据。

   • 字符串、数字、函数、对象、数组、标签

   <Person 
       name="Silly" 
       age={
        21} 
       obj={
        {
         id: 11, name: '狗蛋儿', age: 18 }}
       friends={
        ['SillyGirl','SillyMan','SillyWoman']}
       fn={
        ()