Question

关于功能与经典组件的docs，如果您想创建一个允许您访问this的实例或者您想要生命周期方法，那么您似乎只需要经典组件。这是否意味着一个功能组件只能在里面有渲染？如果需要处理点击，它必须通过标记上的onClick监听器直接链接到其道具，并且无法通过handleClick函数？

const Type = ({onTypeClick, name}) => {
  <li
    onClick={onTypeClick.bind(null, name)}
  >
    {name}
  </li>
}

VS

const Type = React.createClass({
  handleClick (e) {
    e.preventDefault()
    this.props.onTypeClick(this.props.name)
  },
  render() {
    return (
      <li onClick={handleClick}>
        {this.props.name}
      </li>
    )
  }
})

Answer 1

无状态组件返回render函数的结果，但它只是一个函数，因此它可以访问闭包中的东西。

const handleClick = (e, props) => {
  e.preventDefault()
  props.onTypeClick(props.name)
}

const Type = props => {
  // don't forget to return!
  return (
    <li onClick={event => handleClick(event, props)}>
      {props.name}
    </li>
  )
}

反应功能与经典组件

1 个答案: