學習目標
- 組件插槽原理
實例一 props-children
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')
)
實例二 數組遍歷插槽
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')
)
所謂的組件插槽就是在父元素中插入內容,內容模板有子元素而定。