前端业务仔 2021-10-25 14:22 采纳率: 100%
浏览 75
已结题

React报错 TypeError: instance.render is not a function

看React官方文档的Render Props时写了这样一个组件:

class MouseMove extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      x: 0,
      y: 0
    }
    this.handMouseMove = this.handMouseMove.bind(this)
  }

  handMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY,
    })
  }

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

}

class MobileDiv extends React.Component {
  render() {
    const mouse = this.props.mouse
    return (
      < div style={{ position: 'absolute', left: mouse.x, top: mouse.y, height: "5px", width: "5px", backgroundColor: "red" }
      }></div >
    )
  }
}

class MouseTracker extends React.Component {
  rander() {
    return (
      <MouseMove render={mouse => (
        <MobileDiv mouse={mouse} />
      )} />
    )
  }
}

ReactDOM.render(<MouseTracker />, document.getElementById('root'))

报错 TypeError: instance.render is not a function,照着官方文档敲的,为啥会报错呢?

  • 写回答

1条回答 默认 最新

  • CSDN专家-showbo 2021-10-25 14:28
    关注

    render ,不是rander

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 11月2日
  • 已采纳回答 10月25日
  • 创建了问题 10月25日

悬赏问题

  • ¥15 stc12c5a60s2、QMC5883L、LCD1602组合测量磁场所需程序
  • ¥15 vba参数转c++ SAFEARRAY
  • ¥20 Win11测试yolov4,“找不到nvcuda.dll”怎么办?
  • ¥15 simulink绘制bode图
  • ¥15 php_network_getaddresses: getaddrinfo failed: Name or service not known
  • ¥15 用msg发消息出现的问题
  • ¥15 unity3d机械臂
  • ¥20 判断两个表是否完全相同
  • ¥20 工控机出现散热器转一下停一下这种情况,是什么原因造成的
  • ¥15 双显卡,启动docker容器报错。