react 组件通讯
2022年9月26日- 组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据. 在组件化的过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能.而在这个过程中,多个组件之间不可避免的要共享某些数据,为了实现这些功能,就需要打破组件的独立性,让其与外界沟通,这个过程就是组件通讯
props
- 组件是封闭的,要接受外部数据应该通过proprs来实现
- props的作用:接收传递给组件的数据
- 传递数据:给组件标签添加属性
- 接收数据:函数组件通过props 接收数据 ,类组件通过this.props接收数据
props的特点
- 可以给组件传递任意类型的数据 函数方法, 对象
- props是只读的，不允许修改props的数据
- 注意：在类组件中使用的时候，需要把props传递给super()，否则构造函数无法获取到props
函数组件通讯 父传子
|
1 2 3 4 5 6 7 8 9 |
class Hello extends React.Component { constructor(props) { // 推荐将props传递给父类构造函数 super(props) } render() { return <div>接收到的数据：{this.props.age}</div> } } |
子组件
|
1 2 3 4 5 6 |
function Hello(props) { console.log(props) return ( <div>接收到数据：{props.name}</div> ) } |
父组件
|
1 |
<Hello name="jack" age={19} /> |
类组件通讯 父传子
子组件
|
1 2 3 4 5 6 7 |
class Hello extends React.Component { render() { return ( <div>接收到的数据：{this.props.age}</div> ) } } |
父组件
|
1 |
<Hello name="jack" age={19} /> |
