react组件化开发波及到组件嵌套的问题,这就会呈现组件间的通信
先以一个简略的例子展现组件间的嵌套(类组件举例)
class Header extends Component{//头部组件 constructor(props){ super(props) } render(){ return ( <div> <h2>我是头部</h2> </div> ) }}class Banner extends Component{//Main中嵌套的广告组件 constructor(props){ super(props) } render(){ return ( <div> <h4>我是banner</h4> </div> ) }}class ShopList extends Component{//Main组件中的ShopList组件 constructor(props){ super(props) } render(){ return ( <div> <ul> <li>商品1</li> <li>商品2</li> <li>商品3</li> </ul> </div> ) }}class Main extends Component{//Main组件 constructor(props){ super(props) } render(){ return ( <div> <h2>我是主题内容</h2> <Banner/> <ShopList/> </div> ) }}class Footer extends Component{//Footer组件 constructor(props){ super(props) } render(){ return ( <div> <h2>我是尾部</h2> </div> ) }}class App extends Component{ constructor(props){ super(props) } render(){ return ( <div> <Header/> <Main/> <Footer/> </div> ) }}页面构造
index为主页面,外面嵌套了三个子组件,Main里又嵌套着本人的子组件,这就波及到各个组件通信的问题
上面先简略聊聊组建通信父传子
父传子 间接在组件上绑定属性传递数据
上面简略看一个简略的例子
父组件：
import SonCom from './SonCom'class Father extends Component { state = { } render() { return ( <div> {/* 父传子 能够间接传字符串 或者 数组 或者对象 留神：对象或数组须要放在花括号内 */} <SonCom data1="123" data2={[1,2,3]} data3={{name:'尚渔味烤鱼',price:'200$',weight:'800g'}}/> </div> ); }} export default Father;子组件
class SonCom extends Component { constructor(props){ super(props) this.state={} } render() { //解构 const {data1,data2,data3}=this.props return ( <div> <!--取字符串并展现--> <div>{data1}</div> <ul> <!--取数组 遍历展现--> { data2.map((item,index)=>{ return <h3 key={index}>{item}</h3> }) } </ul> <div> <!--取对象--> { Object.keys(data3).map((item,index)=>{ return <h2 key={index}>{data3[item]}</h2> }) } </div> </div> ); }} export default SonCom;父传子小结：父组件传子组件 能够通过在子组件里传入属性，子组件再通过props属性拿到父组件传过来的值
子传父小案例：
点击子导航栏，父组件的内容跟着变动
1.父组件定义事件，以属性的模式将这个事件传给子组件
2.子组件通过props属性拿到父组件传过来的事件,再把本人要传的数据通过这个事件传给父组件
父组件
import Nav from './components/Nav'class TabControl extends Component { constructor(props){ super(props) console.log(this.props) this.state = { arr:['流行音乐','古典音乐','田园风音乐'], num:0 } } render() { return ( <div> <Nav toSon={index=>this.getNum(index)}/> <div className="content"> { // 通过num变量切换显示的内容 <h2>{this.state.arr[this.state.num]}</h2> } </div> </div> ); } //父组件自定义的事件 getNum(index){ console.log(index) //拿到子组件传过来的index赋值给num变量 this.setState({num:index}) }} export default TabControl;子组件：
class Nav extends Component { state = { arr:['风行','古典','田园风'], num:0 } constructor(props){ super(props) console.log(this.props) } render() { return ( <div> <ul> { this.state.arr.map((item,index)=>{ return <li key={index} onClick={()=>{ //给选中的导航栏加款式 this.setState({num:index}) //通过props拿到父组件传过来的函数,并把以后的Index传给父组件 this.props.toSon(index) }} className={this.state.num===index?'active':''} >{item}</li> }) } </ul> </div> ); } } export default Nav;小结：react中的父子组件通信，个人感觉父传子,子传父实质上没有区别,都是父组件通过属性把值传给子组件，子组件拿到值再进行本人的操作,能够把子传父了解成父传子的一种非凡状况(子传父，父组件给子组件通过属性传值,个别传字符串，数组，对象，等。父传子还是父组件通过属性给子组件传值，不同的是传的类型为父组件的自定义事件，子组件拿到这个自定义事件进行本人的操作，并把本人要传的值通过这个事件传给父元素~~~，父元素每次执行这个函数，就能拿到子元素传过来的值,这个就是子传父)
明天的分享结束，感激浏览