基础知识-插槽 ​

import React, { Component } from "react";
import ReacDom from 'react-dom';

const Childer = (props) => {
  // 插槽数据 在{ }插入的时候react帮我们做了处理
  console.log(props.children);
  return (
    // 直接插入会全部渲染出来 可以使用[索引] 来取需要的内容
    <div>
      {props.children}
      {props.children[0]}
    </div>
  );
};

class App extends Component {
  state = {
    show: false,
  };
  render() {
    return (
      // 组件内部写内容|标签 叫做插槽 在 子组件通过this.props.children 方法可以渲染出值 固定方法
      <div>
        <Childer>
          <button
            onClick={() => {
              this.setState({ show: !this.state.show });
            }}
          >
            111111
          </button>
          <button>222</button>
        </Childer>

        <Childer>
          <button>333</button>
          <button>4444</button>
        </Childer>
        
        {this.state.show && "我出来了"}
      </div>
    );
  }
}
ReactDom.render(<App/>,document.getElementById('root'))