10React中组合(插槽)

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:代码讲解如图

控制台输出如下