React 函数可以改成类组件吗

Question

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

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

是否有可能，如果我可以使用“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>
)

Answer 1

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

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

但是这样做有点奇怪 - 它毫无理由地使代码变长，React 自己建议尽可能在新代码中尝试使用功能组件。