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

Question

看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，照着官方文档敲的，为啥会报错呢？

Answer 1

render ，不是rander