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')
)

所謂的組件插槽就是在父元素中插入內容，內容模板有子元素而定。