插槽
子组件中的内容,会被放进this.props.children这个数组里
1、在父组件标签中的子组件B添加内容
<B>xx</B>
2、设置插槽内容在子组件显示
{this.props.children}
3、子组件获取插槽内容中标签上的参数
因为内容按数组放置
{this.props.children[索引].props['data-xx']}
4、可通过对this.props.children的循环,来进行内容、参数处理
搭配this.props.children相关的方法
(1)遍历插槽内的子元素
React.Children.map(this.props.children,(ele,index)=>{
ele.props.键名获取插槽内容的标签属性
return xx
})
React.Children.forEach(children, function[(thisArg)]) 和map遍历相似,不返回数组
(2)获取子元素数目
React.Children.count(this.props.children)
(3)验证children是否只有一个子节点(一个 React 元素),如果有则返回它,否则此方法会抛出错误。
React.Children.only(this.props.children)
(4)将children这个复杂的数据结构以数组的方式扁平展开并返回,并为每个子节点分配一个 key。
当你想要在渲染函数中操作子节点的集合时,它会非常实用,特别是当你想要在向下传递this.props.children之前对内容重新排序或获取子集时
React.Children.toArray(this.props.children)
代码示例:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import './1.css'
{/*https://c.m.163.com/ug/api/wuhan/app/index/feiyan-data-list?t=1582528861997
https://c.m.163.com/ug/api/wuhan/app/data/list-total?t=1582514346850*/}
class A extends React.Component{
constructor(props)
{
super(props);
console.log(props);
}
render()
{
return(
<div>hh
<As>
<h1 data-po='top'>哈哈1</h1>
<h1 data-po='main'>哈哈2</h1>
<h1 data-po='footer'>哈哈3</h1>
</As>
</div>
)
}
}
//子组件
class As extends React.Component{
constructor(props)
{
super(props);
console.log(props);
}
render()
{
//循环获取各个子组件外加参数获取
let one,two,thre;
this.props.children.forEach(function(item,index){
if(item.props['data-po']=='top')
{
one=item;
}else if(item.props['data-po']=='main')
{
two=item;
}else{
thre=item;
}
})
return(
<div>
A的子组件
//获得插槽内容中第一个标签的传入参数
{this.props.children[0].props['data-po']}
//将获得的各个插槽内容,分别显示
<div className='top'>
one
</div>
<div className='main'>
two
</div>
<div className='footer'>
thre
</div>
</div>
)
}
}
ReactDOM.render(<A/>, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();