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

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日

悬赏问题

  • ¥20 搭建pt1000三线制高精度测温电路
  • ¥15 使用Jdk8自带的算法,和Jdk11自带的加密结果会一样吗,不一样的话有什么解决方案,Jdk不能升级的情况
  • ¥15 画两个图 python或R
  • ¥15 在线请求openmv与pixhawk 实现实时目标跟踪的具体通讯方法
  • ¥15 八路抢答器设计出现故障
  • ¥15 opencv 无法读取视频
  • ¥15 按键修改电子时钟,C51单片机
  • ¥60 Java中实现如何实现张量类,并用于图像处理(不运用其他科学计算库和图像处理库))
  • ¥20 5037端口被adb自己占了
  • ¥15 python:excel数据写入多个对应word文档