react学习笔记11:this.props.children和分发
发布时间:2020-12-15 06:47:07 所属栏目:百科 来源:网络整理
导读:我们知道组件除了单标签调用还可以闭合标签调用: Tab / 或者: Tab/Tab 1.分发处理 对于下面这种结构,我们在组件中怎么获取包括的结构: 在组件中,我们知道this.props可以拿到调用位置传递的任意属性,同样的react还为我们提供了 this.props.children 来
我们知道组件除了单标签调用还可以闭合标签调用: <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同样可以识别解析。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |