关于javascript:邂逅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;

分享结束，感激浏览