匿名插槽和具名插槽的简单使用

插槽的概念：

插槽即：ReactDOM.createPortal(child, container) ，由ReactDom提供的接口。 可以实现将子节点渲染到父组件DOM层次结构之外的DOM节点。分为两种：匿名插槽和具名插槽。

先说第一种匿名插槽：

1.咱们在src目录下创建一个叫 SlotTest.js的文件，代码如下：

import React, { Component } from 'react';

class SlotTest extends Component {
    render() {
        return (
            <div>
                <header>
                    这是头部
                </header>
                <section>
                    这是内容
                    {this.props.children}
                </section>
                <footer>
                    这是底部
                </footer>
            </div>
        );
    }
}

export default SlotTest;

2.找到app.js，引入这个匿名插槽，代码如下

import './App.css';
import SlotTest from './SlotTest';


function App() {
  return (
    <div className="App">
     <SlotTest>
        <h2>插槽噢噢噢噢</h2>
      </SlotTest>
    </div>
  );
}

export default App;

3.效果如图

接下来说第二种具名插槽的用法。 

1.咱们先写两个小组件，分别叫 A01.js和 B01.js，A01代码如下（B01同理）：

import React, { Component } from 'react'

export default class A01 extends Component {
    render() {
        return (
            <div>
                这是A01
            </div>
        )
    }
}

2.SlotTest的代码为：

import React, { Component } from 'react';

class SlotTest extends Component {
    render() {
        return (
            <div>
                 <div>
                        这是上边
                        {this.props.up}
                    </div>

                    <div>
                        这是下边
                        {this.props.down}
                    </div>
            </div>
        );
    }
}

export default SlotTest;

3.App,js的代码为：

import './App.css';
import SlotTest from './SlotTest';
import A01 from './A01';
import B01 from './B01';

function App() {
  return (
    <div className="App">
      <SlotTest up={<A01></A01>} down={<B01></B01>}>

      </SlotTest>
    </div>
  );
}

export default App;

4.最终效果如图：