reactjs - 如何有条件地渲染使用钩子(Hook)的 React 组件

Question

以下(尽管是人为的)组件违反了 react-hooks/rules-of-hooks(通过 eslint)

function Apple(props){
  const {seeds} = props;
  if(!seeds){
    return null;
  }
  const [bitesTaken, setBitesTaken] = useState(0);
  return <div>{bitesTaken}</div>
}

出现以下错误有条件地调用 React Hook "useState"。在每个组件渲染中，必须以完全相同的顺序调用 React Hooks。你是否在提前返回后不小心调用了 React Hook？

我了解 Hook need to be called in the same order ，但是这种条件渲染(只要在return前没有调用hook，不妨碍hook按相同的顺序调用。我觉得eslint rule太严格了，不过也许有更好的办法。

有条件地渲染使用钩子(Hook)的组件的最佳方法是什么？

Answer 1

另一种选择是拆分组件。

import React,{useState} from 'react';

const Apple = (props) => {
    const {seeds} = props;
    return !!seeds && <AppleWithSeeds />;
};

const AppleWithSeeds =(props) => {
    const [bitesTaken] = useState(0);
    return <div>{bitesTaken}</div>
};

export default Apple;

此方法的优点是您的组件保持小而合乎逻辑。

在您的情况下，您可能在 useState 初始化程序中有超过“0”的内容，您不希望在条件之前的顶部出现不必要的内容。