邂逅react(十一) react中的插槽

vue中有slot插槽,react中可以通过props实现插槽用法
比如移动端导航栏,主要分为左中右三部分,我们可以在父组件中将要展示的内容先定义好,通过属性传给子组件,子组件通过props接收相关属性再展示

父组件

import Slot from './slot'
class SlotPage extends Component {
    state = {  }
    render() { 
        return ( 
        //可以直接定义属性,将要展示的内容分别放入各自的属性里
        <div>
            <Slot LeftSlot={<div>left</div>} 
                  CenterSlot={<div>center</div>} 
                  RightSlot={<div>Right</div>}/>
        </div> 
        );
    }
}
 
export default SlotPage;

子组件

class Slot extends Component {
    constructor(props){
        super(props)
    }
    render() { 
        const {LeftSlot,CenterSlot,RightSlot}=this.props
        return ( 
            <div className="contentBox">
                <div className="left">{LeftSlot}</div>
                <div className="box">{CenterSlot}</div>
                <div className="right">{RightSlot}</div>             
            </div> 
        );
    }
}
 
export default Slot;

分享完毕，感谢阅读