时间戳

首页 > 解决方案 > 在 React 中有条件地声明一个状态

javascript - 在 React 中有条件地声明一个状态

问题描述

如果提供了某个道具，我可以设置一个状态吗？像这样的东西：

function Comp({scroll, children}) {
    const [scrollY, setScrollY] = useState(0);
    useEffect(() => {
        if (scroll) {
            window.addEventListener('scroll', () => {
                setScrollY(window.pageYOffset);
            });
        }
    }, [])

  // Some other codes...

  return (
    // Some jsx
  );
}

如果没有提供道具，我不需要scrollY状态和副作用。scrollJavaScript 不允许在 if 条件中声明，React 不允许在 if 条件中使用 useState。

function Comp({ scroll, children }) {
    if (scroll) {
        const [scrollY, setScrollY] = useState(0);
        useEffect(() => {
            window.addEventListener('scroll', () => {
                setScrollY(window.pageYOffset);
            });
        }, [])
    }

    // Some other codes...

    return (
        // Some jsx
    );
}

我正在寻找这样的东西，但显然它不会工作。

标签： javascriptreactjs

解决方案

根据 React的 hooks 规则，不要在循环、条件或嵌套函数中使用 hooks，hook 只能在顶层使用。因此，对于您的问题，没有使用条件声明状态useState

如果您想根据特定的道具实现逻辑，那么您应该根据检查道具来实现它，就像useEffect您所做的那样：

useEffect(() => {
  if (scroll) {
    window.addEventListener('scroll', () => {
       setScrollY(window.pageYOffset);
      });
  }
}, [])

或者条件渲染 JSX：

{ scroll && renderStuffsIfScrollExist() }

推荐阅读