这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天

学习笔记

React的学习3

React的组件通讯

组件状态是独立的，组件化之后涉及状态同步，需要进行组件通讯。

组件通讯-props 基本使用

props是实现组件通讯的关键，它通过使用组件来绑定属性，组件内部使用props来传值。
能够通过 props 传递数据和接收数据：

• 传递数据和接收数据
• 函数组件使用props
• 类组件使用props

1.在使用组件的时候通过属性来绑定数据，在组件内部通过props获取。
2.函数组件使用props：

// 使用组件
<Hello name="SAM" age="17" />

//定义组件 props包含以上自定义的属性
function Hello(props) {
    return <div>接收到的数据:{props.name}<\div>;
    }

3.类组件使用props：

// 使用组件
<Hello name="SAM" age="17" />

//定义组件 props包含以上自定义的属性
class Hello extends Component {
   render() {
       return <div>接收到的数据:{props.name}<\div>;
    }
   }

props是单项数据流只读，但可以传递任意数据。
props的children属性：
表示该组件的子节点，只要组件有子节点，props就有该属性。

children 属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数）。
父组件传入数据：

<子组件 自定义属性1={值1} 自定义属性2={值2} .... />

子组件接收数据：
a.函数式组件接收数据
b.类组件接收数据

// 接收数据： 函数组件需要通过补充形参来获取
function 子组件(props) {
  console.log('从父组件中传入的自定义属性被收集在对象:', props)
  return (<div>子组件的内容</div>)
}



// 接收数据： class 组件需要通过 this.props 来获取
class 子组件 extends Component {
    console.log('从父组件中传入的自定义属性被收集在对象:', this.props)
    render() { return (<div>子组件的内容</div>) } 
    }

父传子方式

• 父组件提供要传递的 state 数据
• 给子组件标签添加属性，值为 state 中的数据
• 子组件中通过 props 接收父组件中传递的数据