关于javascript:邂逅react十一-react中的插槽

39次阅读

共计 640 个字符，预计需要花费 2 分钟才能阅读完成。

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;

分享结束，感激浏览

正文完