<Tab />
或者:
<Tab></Tab>
1.分发处理
在组件中,我们知道this.props可以拿到调用位置传递的任意属性,同样的react还为我们提供了this.props.children
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import registerServiceWorker from './registerServiceWorker'; //设置组件 class Slot extends React.Component { render() { return <div> {this.props.children} </div> } } ReactDOM.render( <div> <Slot><span>分发内容1</span></Slot> </div>,document.getElementById('root') ); registerServiceWorker();
审查元素:
同样可以设置多个分发内容:
我们console.log(this.props.children)
2.分发组件
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import registerServiceWorker from './registerServiceWorker'; //设置组件 class Slot extends React.Component { render() { return <div> {this.props.children} </div> } componentDidMount() { console.log(this.props.children) } } //设置组件2 class Slot2 extends React.Component { render() { return <div> 我是组件2 </div> } } ReactDOM.render( <div> <Slot><Slot2></Slot2></Slot> </div>,document.getElementById('root') ); registerServiceWorker();
我们会发现this.props.children同样可以识别解析。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。