学习目标
- 组件插槽原理
组建中写入内容,这些内容可以被识别和控制。React需要自己开发支持插槽功能。
原理: 组件中写入的HTML,可以传入到props中。
实例一 props-children
组件中的HTML内容直接全部插入。
import React from 'react';
import ReactDOM from 'react-dom';
class ParentCom extends React.Component {
constructor(props) {
super(props)
console.log(props)
}
render () {
return (
<div>
<h1>组件插槽</h1>
{/* 重点 */}
{this.props.children}
</div>
)
}
}
ReactDOM.render(
<ParentCom>
<h2 data-name='a'>子组件1</h2>
<h2 data-name='b'>子组件2</h2>
<h2 data-name='c'>子组件3</h2>
</ParentCom>,
document.querySelector('#root')
)
实例二 数组遍历插槽
组件中根据HTML内容的不同,插入的位置不同。
import React from 'react';
import ReactDOM from 'react-dom';
class ParentCom extends React.Component {
render () {
console.log(this.props)
return (
<div>
<h1>组件插槽</h1>
{/* 重点 */}
{this.props.children}
<ChildCom>
<h1 data-position="header">头部内容</h1>
<h1 data-position="main">主要内容</h1>
<h1 data-position="footer">尾部内容</h1>
</ChildCom>
</div>
)
}
}
class ChildCom extends React.Component {
render() {
let headerCom, mainCom, footerCom;
this.props.children.forEach((item, index) => {
if(item.props['data-position']==='header') {
headerCom = item
} else if(item.props['data-position']==='main') {
mainCom = item
} else {
footerCom = item
}
})
return (
<div>
<div>{headerCom}</div>
<div>{mainCom}</div>
<div>{footerCom}</div>
</div>
)
}
}
class RootCom extends React.Component {
constructor(props) {
super(props)
console.log(props)
this.state = {
arr: [1,2,3]
}
}
render() {
return (
<ParentCom>
<h2 data-name='a' data-index={this.state.arr[0]}>子组件1</h2>
<h2 data-name='b' data-index={this.state.arr[1]}>子组件2</h2>
<h2 data-name='c' data-index={this.state.arr[2]}>子组件3</h2>
</ParentCom>
)
}
}
ReactDOM.render(
<RootCom />,
document.querySelector('#root')
)
所谓的组件插槽就是在父元素中插入内容,内容模板有子元素而定。