React通关手册——render props

点击查看【bilibili】

children props

通常来说，在react中父子组件传递数据，都是通过props的形式，

class Parent extends React.Component{
    state = {name: 'Tom'}
    render() {
        return <child name = {this.state.name}/>
    }
}
class Child extends React.Component{
    render() {
        console.log(this.props.name)
        return 
    }
}

很自然的，我们可以在Child组件中通过this.props.name拿到数据。那么，下面这种写法Child组件如何拿到数据呢？

class Parent extends React.Component{
    state = {name: 'Tom'}
    render() {
        return (
            <Child>
                {this.state.name}
            <Child/>
        )
    }
}

原来，在React中，将标签体里面的内容通过props中的children属性传递给了子组件。那么Child组件这么写可以拿到父组件的数据。

class Child extends React.Component{
    render() {
        console.log(this.props.children)
        return 
    }
}

我们对于父组件—子组件—孙组件的嵌套写法如下所示：

// 父组件
class Parent extends Component {
    render() {
        return ( <A/> );
    }
}
// 子组件
class A extends Component {
    render() {
        return ( <B/> );
    }
}
// 孙组件
class B extends Component {
    render() {
        return ( );
    }
}

同样的，我们可以在Parent组件中来构造AB组件的父子关系。并在A组件中使用this.props.children

// 父组件
class Parent extends Component {
    render() {
        return (
           <A>
               <B/>
           </A>
        )
    }
}
// 子组件
class A extends Component {
    render() {
        return ( <div> {this.props.children} </div> );
    }
}
// 孙组件
class B extends Component {
    render() {
        return ( <h3>我是B组件</h3> );
    }
}

但是，当组件A需要传递值给组件B时，如何在Parent组件中传递值呢？很显然在Parent组件无法获得A组件的name。那我又想把A的name传递给B。how？这时候就引出了render props的做法。

// 父组件
class Parent extends Component {
    render() {
        return (
            <A>
                <B/>
            </A>
        );
    }
}
// 子组件
class A extends Component {
    state = {name: "Tom"}
    ...
}
// 孙组件
class B extends Component {
    ...
}

render props

直接上方案：

class Parent extends Component {
    render() {
        return (
            <div>
                <h3>我是Parent组件</h3>
                <A render={(name) => <B name={name}/>}/>
            </div>
        );
    }
}
class A extends Component {
    state = {name: "Tom"}
    render() {
        return (<div> {this.props.render(this.state.name)} </div>)
    }
}
class B extends Component {
    render() {
        return (<h4>{this.props.name}</h4>)
    }
}

在Parent组件中，给A组件传递一个render方法，该方法参数为name，返回一个组件B，且props为传递的参数。之后在组件A中调用render方法。

意义

为什么要这么麻烦呢？直接Parent里嵌套A，A里嵌套B，数据通过props传递不行吗？当然可以，但在开发过程中AB组件可能由不同的人开发，并不确定AB会成为父子组件，直接在A里写死并不是合适的做法。因此，通过render props这种方式，可以最后确定AB组件的关系，并且还能传递数据。

参考

官方 render props