时间戳

首页 > 解决方案 > 如何有条件地渲染使用钩子的 React 组件

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

问题描述

以下（尽管是人为的）组件违反了 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" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?

我知道钩子需要按相同的顺序调用，但是这种条件渲染（只要在返回之前没有调用任何钩子，并不妨碍钩子按相同的顺序调用。我认为eslint 规则是太严格了，但也许有更好的方法。

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

标签： reactjsreact-hooks

解决方案

另一种选择是拆分组件。

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' 的内容，您不希望在条件之前的顶部出现不必要的内容。

推荐阅读