解析React中该render prop用法及this.props.mouse不是函数报错问题

代码片段运行逻辑 #

你贴的这段嵌套代码是render prop的典型用法之一：

<Mouse>
  {mouse => (
    <p>The mouse position is {mouse.x}, {mouse.y}</p>
  )}
</Mouse>

它的运行逻辑是：把一个箭头函数作为组件的子元素传入，组件内部会在render时执行这个函数，把自身维护的鼠标位置state作为参数传递给函数，最终渲染函数返回的UI内容。这种设计可以让状态逻辑复用和渲染逻辑完全解耦，组件只负责管理鼠标位置状态，不需要关心具体要渲染什么内容。

报错原因 #

你收到this.props.mouse is not a function报错的核心原因是子组件期望接收的prop和父组件实际传入的内容不匹配：
你的组件内部render方法中写的是{this.props.mouse(this.state)}，代表组件期望接收一个名为mouse的函数类型prop来执行；但你调用时是把箭头函数写在了组件标签内部，这个函数实际会被挂载到this.props.children属性上，不存在this.props.mouse这个属性，调用自然就报错了。

修复方案 #

两种方案二选一即可：

方案1：调整的调用方式 #

显式给传入名为mouse的prop，值为你写的渲染函数：

<Mouse
  mouse={mouse => (
    <p>The mouse position is {mouse.x}, {mouse.y}</p>
  )}
/>

方案2：调整的内部逻辑 #

如果你想要支持把渲染函数写在组件子元素的位置，直接把内部调用的this.props.mouse改成this.props.children即可：

render() {
  return (
    <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
      {this.props.children(this.state)}
    </div>
  );
}

补充小提示：你的ReactDOM.render代码里选择挂载节点用的是document.querySelector('div')，建议改成document.querySelector('#root')，避免页面有其他div时挂载到错误节点。

内容的提问来源于stack exchange，提问作者Chong Lip Phang