react插槽

react插槽

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

原理:

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

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

class ParentCom extends React.Component{//不写构造函数也默认有props
	render(){
		console.log(this.props)
		return(
			<div>
				<h1>组件插槽</h1>
				{this.props.children}
            </div>
        )
     }
 }

class RootCom extends React.Component{
    constructor(props){
        super(props)
        //this.state定义变量
        this.state = {
            arr:[1,2,3]
        }
    }
    render(){
        return(
        	<ParentCom>
                //定义一个变量arr，props也可以传变量
                <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></RootCom>,
     document.querySelector("#root")
)

RootCom组件插入了ParentCom组件，ParentCom组件又插入了ChildCom组件

渲染要在自己的组件渲染

<ParentCom>组件的**{this.props.children}**是<RootCom>中的<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> 

<ChildCom>组件的this.props.children是<ParentCom>组件中的<ChildCom>部分：

		<h1 data-position= "header">这是放置到头部的内容</h1>
        <h1 data-position= "main">这是放置到主要的内容</h1>
        <h1 data-position= "footer">这是放置到尾部的内容</h1>

​

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)=>{
        	//item.props['data-position']代表item的data-position属性的值
            //组件中根据HTML内容不同插入的位置不同，通过变量进行判断
            if(item.props['data-position']==='header'){
        		headerCom = item
        	}else if(item.props['data-position']==='main'){
        		mainCom = item
        	}else{
                footerCom = item
            }
        })
        return(
            <div>
            	<div className="header">
            		{headerCom}
                </div>
                <div className= "main">
                	{mainCom}
                </div>
                <div className= "footer">
                	{footerCom}
				</div>
            </div>
        )
    }
}

class RootCom extends React.Component{
    constructor(props){
        super(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></RootCom>,
     document.querySelector("#root")
)