时间戳

首页 > 解决方案 > React 函数可以改成类组件吗

reactjs - React 函数可以改成类组件吗

问题描述

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

函数值如何显示在 HTML 标记中，并带有 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

解决方案

你可以，你需要做的就是在一个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>
    );
  }
}

但是这样做有点奇怪——它没有太多理由使代码变长，React 自己建议尽可能在新代码中尝试使用函数式组件。

推荐阅读