如何使用 React Hooks 将具有构造函数的类转换为功能组件？

Posted 2023-02-22

【中文标题】如何使用 React Hooks 将具有构造函数的类转换为功能组件？

【英文标题】：How can I convert a class with a constructor to a functional component using React Hooks?

【发布时间】：2021-07-04 04:15:19

【问题描述】：

如何使用 React Hooks 将以下带有构造函数的类转换为功能组件？

class App extends React.Component 
  constructor(props) 
    super(props);
    this.toggleVisibility = this.toggleVisibility.bind(this);
    this.handleOnBlur = this.handleOnBlur.bind(this);
  

我在网上看到你可以为构造函数做这样的事情：

const useConstructor(callBack = () => ) 
  const [hasBeenCalled, setHasBeenCalled] = useState(false);
  if (hasBeenCalled) return;
  callBack();
  setHasBeenCalled(true);

然后把类改成函数，这样使用：

const App = () => 
  useConstructor(() => );

但我不确定如何处理 toggleVisibility 和 handleOnBlur

【问题讨论】：

您正在做的binds 是对使用functional components 时不存在的问题的修复，因此使useConstructor 挂钩无用。参考***.com/questions/53215067/…

【参考方案1】：

您无需在功能组件内使用构造函数（除非遇到一些困难的特定问题）。您可以像这样在功能组件中使用简单的箭头函数：

const App = props => 
    const toggleVisibility = toggleProps => 
        console.log('toggleProps should be true', toggleProps);
    ;

    const handleOnBlur = () => ;

    return (
        <>
            <button onClick=handleOnBlur />
            <button
                onClick=() => 
                    toggleVisibility(true);
                
            />
        </>
    );
;

【参考方案2】：

不需要绑定和useConstructor，下面应该是等价的：

const App = (props) => 
  let toggleVisibility;
  let handleOnBlur;
  // ... rest of your component logic