React 函数式与经典组件答案

【问题标题】：React functional vs classical componentsReact 函数式与经典组件
【发布时间】：2016-08-27 08:06:35
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

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>
  )
}

【讨论】：