React 插槽

学习目标

• 组件插槽原理

组建中写入内容，这些内容可以被识别和控制。React需要自己开发支持插槽功能。

 

原理： 组件中写入的HTML，可以传入到props中。

 

实例一 props-children

 

组件中的HTML内容直接全部插入。

 

 

import React from 'react';
import ReactDOM from 'react-dom';

class ParentCom extends React.Component {
    constructor(props) {
        super(props)
        console.log(props)
    }
    render () {
        return (
            <div>
                <h1>组件插槽</h1>
                {/* 重点 */}
                {this.props.children}
            </div>
        )
    }
}

ReactDOM.render(
    <ParentCom>
        <h2 data-name='a'>子组件1</h2>
        <h2 data-name='b'>子组件2</h2>
        <h2 data-name='c'>子组件3</h2>
    </ParentCom>,
    document.querySelector('#root')
)

实例二 数组遍历插槽

 

组件中根据HTML内容的不同，插入的位置不同。

 

import React from 'react';
import ReactDOM from 'react-dom';

class ParentCom extends React.Component {
    render () {
        console.log(this.props)
        return (
            <div>
                <h1>组件插槽</h1>
                {/* 重点 */}
                {this.props.children}
                <ChildCom>
                    <h1 data-position="header">头部内容</h1>
                    <h1 data-position="main">主要内容</h1>
                    <h1 data-position="footer">尾部内容</h1>
                </ChildCom>
            </div>
        )
    }
}

class ChildCom extends React.Component {
    render() {
        let headerCom, mainCom, footerCom;
        this.props.children.forEach((item, index) => {
            if(item.props['data-position']==='header') {
                headerCom = item
            } else if(item.props['data-position']==='main') {
                mainCom = item
            } else {
                footerCom = item
            }
        })
        return (
            <div>
                <div>{headerCom}</div>
                <div>{mainCom}</div>
                <div>{footerCom}</div>
            </div>
        )
    }
}

class RootCom extends React.Component {
    constructor(props) {
        super(props)
        console.log(props)
        this.state = {
            arr: [1,2,3]
        }
    }
    render() {
        return (
            <ParentCom>
                <h2 data-name='a' data-index={this.state.arr[0]}>子组件1</h2>
                <h2 data-name='b' data-index={this.state.arr[1]}>子组件2</h2>
                <h2 data-name='c' data-index={this.state.arr[2]}>子组件3</h2>
            </ParentCom>
        )
    }
}
ReactDOM.render(
    <RootCom />,
    document.querySelector('#root')
)

所谓的组件插槽就是在父元素中插入内容，内容模板有子元素而定。