React16:组件插槽

React16组件插槽使用方式

Posted by wang chong on April 14, 2019

什么是插槽???

插槽就是事先定一个容器,当组件渲染的时候把子组件渲染到事先定义的容器里面。

React提供了一个顶级方法ReactDom.createPortal(),使我们有能力把一个子组件渲染到特定的DOM元素中去。

使用插槽

首先要创建一个插槽容器,容器是单纯的html。

const portalElm = document.createElement("div");
document.body.appendChild(portalElm);

创建完插槽之后要定义一个插槽组件,插槽组件使用React顶级APIReactDom.createPortal()方法把所需要渲染的DOM元素中。

注意:这里的DOM元素是已存在的DOM元素,不可以是Vdom,不能是ref取到的元素。

ReactDom.createPortal API

这个API接受两个参数:

  1. 第一个参数是所要插入的子组件。
  2. 第二个参数是插槽容器DOM元素。

定义插槽组件

const Tip = ({children,container}) => ReactDom.createPortal(children,container);

插槽组件保持纯度,组件接受一个container属性,并把所有的子组件渲染到指定container指定的DOM中去。

在组件中使用

class Greeting extends Component {
    constructor(props){
        super(props);
        this.state = {
            todos : [
                "react",
                "react-dom",
                "react-redux"
            ]
        }
    }
    render(){
        return(
            <>
                <Tip container={portalElm}>
                    {this.state.todos.map((todo,index)=> <li key={index}>{todo}</li> )}
                </Tip>
            </>
        )
    }
}

应用场景

在开发过程中,有时候我们需要类似于模态,Tips中的信息,还有如果有错误信息,需要把错误在一个固定的位置显示,这样的场景下可以使用插槽。