一、React组件通讯:
1.父传子
2.子传父
3.兄弟之间
第一种:父传子
第一步:在父组件(App.js)引入子组件(tab.js)
例如:import TabCom from './pages/tab'
第二步:在父组件向子组件传递数据
例如:<TabCom info={ { num:2400,title:'1603A-ok' } } ></TabCom>
第三步:子组件如何接收父组件的数据 (主要通过 this.props.属性名实现)
例如:
let {num,title}=this.props.info
console.log('父组件num的值为:',num);
console.log('父组件title的值为:',title);
第二种:子传父
// Vue实现的子传父 this.$emit('派发的自定义事件',要传递给父组件的数据)
//React还是通过this.props来实现的,具体是通过传递一个回调函数实现
第一步:在父组件(App.js)引入子组件(tab.js)
例如:import TabCom from './pages/tab'
第二步:在父组件向子组件传递一个回调函数 例如:sendValue() {....}
例如:
<TabCom
send={ this.sendValue.bind(this)}
>
</TabCom>
第三步:子组件如何接收父组件的函数(主要通过 this.props.回调函数名实现)
例如:
this.props.send(要传递给父组件的值)
第三种:兄弟之间(也称非父子)
1.通过公共组件作为桥梁,来实现兄弟通讯
2.通过Redux来实现
ReactDOM.render(<Main />,要插入的位置);
1.如何定义父子通讯的默认属性:defaultProps={ }
组件内定义
static defaultProps={
默认属性:值
}
组件外定义:
组件名.defaultProps={
默认属性:值
}
2. 函数式组件肯定是无状态组件,类组件可以是无状态组件也可以是有状态组件
生命周期:????
props和state的区别:
state:(对内)针对组件内部的状态,组件外外部是访问不到的
props:(对外)是组件之间访问时用到的,组件内部可以通过props来访问到另一个组件的数据
原则:多用props,少用state