美文网首页程序员React.js
React 的 children API

React 的 children API

作者: zidea | 来源:发表于2019-05-18 18:33 被阅读18次
    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

    相关文章

      网友评论

        本文标题:React 的 children API

        本文链接:https://www.haomeiwen.com/subject/wzhtzqtx.html