前端业务仔 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日

悬赏问题

  • ¥15 微信会员卡等级和折扣规则
  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络,如何解决?
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构,按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分