React 函数可以改成类组件吗答案

【问题标题】：Can a React function be changed into a class componentReact 函数可以改成类组件吗
【发布时间】：2021-01-25 17:14:37
【问题描述】：

请在 Guilherme Toti 的以下链接中查看答案。

How can a function value is displayed in a HTML tag with a return value from addEventListerner click?

是否可以，如果我可以使用“const Keys”作为反应组件，即：“class Keys extends React.Component”。

 const Keys = ({ calcKeys, handleClick }) => (
    <div className="display-keys">
      {calcKeys.map(item => (
           <button onClick={() => handleClick(item.key)}>{item.key}</button>
       ))}
    </div>
)

【问题讨论】：

标签： reactjs

【解决方案1】：

你可以，你需要做的就是在render方法中引用组件的props：

class Keys extends React.Component {
  render() {
    const { calcKeys, handleClick } = this.props;
    return (
      <div className="display-keys">
        {calcKeys.map(item => (
             <button onClick={() => handleClick(item.key)}>{item.key}</button>
         ))}
      </div>
    );
  }
}

但这样做有点奇怪 - 它会毫无理由地使代码变长，并尽可能在新代码中反应 recommend to try using functional components。

【讨论】：

【解决方案2】：

是的。你当然可以重写为类组件。但趋势是将类组件重写为函数式。

类组件可以做的事情也可以通过函数类来实现。函数式组件也有使用钩子的优势。

看看hooks

【讨论】：