京东-优惠雷达
无畏Pro 14限量抢购
冷藏饮料节
最高12期免息再送支架
自营热卖

10React中组合(插槽)

不奢求爱情 1年前   阅读数 87 0

1:改写App.js中Child2调用的写法

import React, { Component } from 'react'
import Child1 from "./Child1";
import Child2 from './Child2';

export default class App extends Component {
    constructor(props){
        super(props);
        this.state ={
            from:"我是app的数据"
        }
    }
    show=()=>{
        alert("66666");
    }
    render() {
        return (
            <div>
                <Child1>
                </Child1>
                <Child2  from={this.state.from}>
                    <button onClick={()=>{
                        this.show()
                    }}>按钮</button>
                   <button onClick={this.show}>按钮</button>
                </Child2>
            </div>
        )
    }
}

2:代码说明如图

3:回到Child2.js中 代码如下

import React, { Component } from 'react'

export default class Child2 extends Component {
    constructor(props){
        super(props);
        console.log(props);
    }
    render() {
        var btn = this.props.children[0];
        return (
            <div>
                我是子组件2{this.props.from}
                {btn}
            </div>
        )
    }
}

4:代码讲解如图

控制台输出如下

发布了15 篇原创文章 · 获赞 29 · 访问量 4298

注意:本文归作者所有,未经作者允许,不得转载

全部评论: 0

    我有话说: