React 函数可以更改为类组件吗？

Question

请在以下链接中查看吉列尔梅·托蒂的答案。

函数值如何显示在 HTML 标记中，并返回来自 addEventListerner 单击的值？

如果我能使用“const Keys”作为react组件，即：“类Keys扩展React.Component”。

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

Answer 1

是的。你当然可以重写类组件。但是趋势是将类组件重写为功能性的。

可以作为类组件完成的工作也可以通过函数类实现。功能组件还具有使用挂钩的优势。

看一下钩子

Answer 2

您可以，您需要做的就是在渲染方法中引用组件的 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>
    );
  }
}

但是这样做有点奇怪——它会使代码变得更长，而且反过来建议尽可能在新代码中使用功能组件。