什么是Render Props
“render prop”是指一种在React组件之间使用值为函数的prop共享代码的技术

创新互联建站主要业务有网站营销策划、成都网站设计、成都网站建设、微信公众号开发、小程序设计、H5响应式网站、程序开发等业务。一次合作终身朋友，是我们奉行的宗旨；我们不仅仅把客户当客户，还把客户视为我们的合作伙伴，在开展业务的过程中，公司还积累了丰富的行业经验、营销型网站资源和合作伙伴关系资源，并逐渐建立起规范的客户服务和保障体系。 

这个概念听上去有点拗口，我们拆开了看它。

首先它本质上是一个prop，是用来父子组件之间传递数据用的
其次这个prop传递的值是一个函数
最后它取名render props，是因为它通常是用来render(渲染)某个元素或组件
比如官网给出的示例：

 
 

  
  
 (
  
  
  
Hello {data.target}
  
  
)}/>
 
 

我们给 这个子组件传递了一个叫 render 的prop，这个prop的值是一个函数，它返回了一个 h1 元素。然后我们可以假装实现一下这个 组件：

 
 

  
  
class DataProvider extends React.Component {
  
  
    state = {
  
  
        data: {
  
  
            target: 'World'
  
  
        }
  
  
    }
  
  
    render() {
  
  
        return this.props.render(this.state)
  
  
    }
  
  
}
 
 

最终我们的 DataProvider 组件渲染的结果就是

Hello World

这里就要讲到代码的可复用性了，假如下次我们希望 DataProvider 组件渲染的结果就是 Hello World 呢？难道又去修改 DataProvider 组件吗？有了render props，我们就可以动态地决定 DataProvider 组件内部要渲染的元素，同时这个元素还可以使用到 DataProvider 组件内部的数据。

实际项目案例
下面讲一个实际的项目案例，下图中我们有一个横向滚动的 ScrollView 组件，这个组件本身是个很普通的

元素， 只不过样式上加了 overflow-x: scroll 所以可以横向滚动起来。产品同学说滚动区域的下方要有进度点指示，从而告诉用户总共有几个产品，已经现在滚到第几个产品了。

明确了产品需求以后，我们就开始来实现，首先看下第一版：

 
 

  
  
class demo extends Component {
  
  
    state = {
  
  
      activeIndicator: 0,
  
  
      list: []
  
  
    }
  
  
    
  
  
    onScroll = () => {
  
  
        const { list } = this.state;
  
  
        const container = findDOMNode(this.refs.container);
  
  
        ...
  
  
        const itemVisibleLengthInContainer = list.map((item, index) => {
  
  
          const node = findDOMNode(this.refs[`item-${index}`]);
  
  
           ...
  
  
        });
  
  
        this.setState({
  
  
          activeIndicator: active,
  
  
        });
  
  
    };
  
  
    
  
  
    render() {
  
  
        const { list, activeIndicator } = this.state;
  
  
        return (
  
  
             
  
  
                ref="container"
  
  
                horizontal={true}
  
  
                onScroll={this.onScroll}
  
  
             >
  
  
                {list.map((item,i) => (
  
  
                    
  
  
                        ref={`item-${i}`}
  
  
                        data={item}
  
  
                    />
  
  
                 ))}
  
  
                 
  
  
             
  
  
             
  
  
        )
  
  
    }
  
  
}
 
 

ok，需求我们已经实现了。实现逻辑就是给 ScrollView 组件添加一个 onScroll 事件，每当滚动的时候，会先计算 ScrollView 容器的位置信息，和每一个 ProductItem 的位置信息，算出现在哪个 ProductItem 在 ScrollView 容器中所占比例最高，从而得出现在应该高亮的 activeIndicator 。

不过现在有个问题哦，给 ScrollView 组件增加进度指示器这个功能，更像是 ScrollView 组件应该支持的一个功能，而不是直接写在业务代码里。所以我们应该提供一个新组件 ScrollViewWithIndicator ，让它去处理进度指示器的问题，从而跟业务解耦。

 
 

  
  
class ScrollViewWithIndicator extends Component {
  
  
    state = {
  
  
      activeIndicator: 0,
  
  
    }
  
  
    
  
  
    onScroll = () => {
  
  
        const { list } = this.props;
  
  
        const container = findDOMNode(this.refs.container);
  
  
        ...
  
  
        const itemVisibleLengthInContainer = list.map((item, index) => {
  
  
          const node = findDOMNode(this.refs[`item-${index}`]);
  
  
           ...
  
  
        });
  
  
        this.setState({
  
  
          activeIndicator: active,
  
  
        });
  
  
    };
  
  
    
  
  
    render() {
  
  
        const [{ list, children, ...restProps } , { activeIndicator }] = [this.props, this.state];
  
  
        return (
  
  
             
  
  
                ref="container"
  
  
                {...restProps}
  
  
                onScroll={this.onScroll}
  
  
             >
  
  
                {list.map((item,i) => (
  
  
                       
  
  
                        {children(item}