export default class Greeting extends Component {
render() {
return (
<div className="container">
<Parent>
<h1>hello children Api</h1>
</Parent>
</div>
)
}
}
在 react 提供了 props 上 children 属性可以轻松实现父级组件向子级组件注入 dom 元素。
export default class Greeting extends Component {
render() {
return (
<div className="container">
<Parent>
<h1>hello children Api</h1>
<div className="box">
<p>this is a loist</p>
</div>
<div className="box">
<p>this is a loist</p>
</div>
<div className="box">
<p>this is a loist</p>
</div>
</Parent>
</div>
)
}
}
在<Parent> 组件的 dom 元素都以 children 传入子组件进行渲染。想必大家这一点都已经很清楚。我们今天更加深入研究一下 Children Api。 希望对大家会有所帮助。
render() {
return (
<div>
{Children.only(this.props.children)}
</div>
)
}
如何定义 Children.only 函数来接收 this.props.children 作为参数,这样就只允许在接收一个 dom 元素,而不是一堆 dom 元素作为参数进行渲染。
render() {
return (
<div className="container">
<Parent>
<div className="box">
<p>this is a loist</p>
</div>
</Parent>
</div>
)
}
不然就会显示以下错误信息。
React.Children.only expected to receive a single React element child.
还可以使用 Children 提供 count 来显示作为 children 的 dom 元素的数量。
render() {
return (
<div>
<h1>count: {Children.count(this.props.children)}</h1>
{this.props.children}
</div>
)
}
使用 Children 的 map 方法还可以对传入 children 元素进行进一步的修改。
export default class Parent extends Component {
render() {
const buttons = Children.map(this.props.children, child => (
<figure className="image is-128x128">
{child}
<p>this is a pic</p>
</figure>
))
return (
<div>
<h1>count: {Children.count(this.props.children)}</h1>
{buttons}
</div>
)
}
}
下面是使用 Children 的 Api 做的幻灯片切换效果,大家可能在实际开发中会用到。
export default class SlideShow extends Component {
state = {
total:0,
current:0,
}
componentDidMount(){
const {children} = this.props;
this.setState({total:Children.count(children)});
this.interval = setInterval(this.showNext, 6000);
}
componentWillUnmount(){
clearInterval(this.interval);
}
showNext = () => {
const { total, current } = this.state;
this.setState({
current:current + 1 === total? 0 : current + 1
});
}
render() {
const {children} = this.props;
const bullets = Array(this.state.total).fill("o")
bullets[this.state.current] = "."
return (
<div className="card">
{Children.toArray(children)[this.state.current]}
</div>
)
}
}
reactjs rocket
网友评论