React 的 children API

reactjs

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