在子组件中使用this.props时,该属性有一个children属性,使用该属性即可获取父组件包含的内容
例如:
import React from 'react'
class JobManagement extends React.Component{
constructor(props){
super(props)
this.state = {
isShow: false
}
}
toggleLayer = () => {
this.setState({
isShow: !this.state.isShow
})
}
onCancel = () => {
this.setState({
isShow: false
})
}
render(){
return (
<React.Fragment>
<Layer
isShow={this.state.isShow}
onCancel={this.onCancel}
>
123
<div>1</div>
<p>sdfasf</p>
</Layer>
</React.Fragment>
)
}
}
export default JobManagement
import React from 'react'
import 'layer.styl'
class Layer extends React.Component{
constructor(props){
super(props)
}
render(){
return (
<div style={{display: this.props.isShow ? 'block' : 'none'}}>
<div className={'mask'} onClick={this.props.onCancel}/>
<div className={'layerWrap'}>
<div className={'layer'}>
<div className={'layerHead'}>
<div className={'layerHeadTitle'}>添加</div>
</div>
<div className={'layerBody'}>
{
this.props.children
}
</div>
<div className={'layerFooter'}>
<Button onClick={this.props.onCancel} className={'cancelButton'}>取消</Button>
<Button className={'confirmButton'}>提交</Button>
</div>
</div>
</div>
</div>
)
}
}
export default Layer
如上,使用this.props.children即可实现类似具名效果