（六）React组件通信

理解组件通信

概念：组件通信就是组件之间的数据传递，根据组件嵌套关系不同，有不同的通信方式。

• A - B 父子通信
• B - C 兄弟通信
• A - E 跨层通信

1. 父传子 – 基础实现

实现步骤：

1. 父组件传递数据 - 在子组件标签上绑定属性
2. 子组件接收数据 - 子组件通过props参数接收数据

用例：

• props实际是一个对象，通过对象.属性的方式取值

function Son(props) {
   
	console.log(props)
    return <div>{
   props.name}</div>
}

function App() {
   
    const name = 'this is app name'

    return (
        <div>
            <Son name={
   name}/>  
        </div>
    );
}

export default App;

1.1 父传子 – props对象说明

1. props可以传任意的数据
   数字、字符串、布尔值、数组、对象、函数、JSX

2. props是只读对象
   子数组只能读取props中的数据，不能直接进行修改，父组件的数据只能由父组件修改

1.2 父传子 – 特殊的props：children

场景：当我们把内容嵌套在子组件标签中，父组件会自动在名为children的props属性中接收该内容

console打印children元素

审查元素，查看是否真的是span元素