如何在 NextJS 中管理函数组件状态？

Question

我想在组件 2 中访问组件 1 的状态变量，它们是“兄弟”组件。我怎样才能做到这一点？只有 1 个状态变量。我将 nextjs 与样式组件和打字稿一起使用。我的项目也有原子设计结构。我想做类似的事情：

const Component1 = (): ReactElement => {
  const [value, setValue] = useState(false);
  return(
    <div>Component 1 code</div>
  );
}

const ComponentRendered = (): ReactElement => {
  const [value, setValue] = useState(false);
  const [shouldRender, setShouldRender] = useState(false);
  
  const conditionalRendering = (component1Variable) => {
    setShouldRender(component1Variable);
  };

  const component2 = (
    <div>Component 2 code</div>
  )

  return {(shouldRender && component2) || <></>};
}


//index.js

const Index = (): ReactElement => {
  return(
    <div>
      <ComponentRendered />
      <OtherComponents />
    </div>
  );
}

Answer 1

如果是兄弟组件，状态应该由Parent组件管理，并作为props传递给它们。

在你的示例中我真的看不出你在哪里使用 Component1，但它可能看起来像这样：

const Component1 = ({ value }): ReactElement => {
  return(
    <div>Component 1 code</div>
  );
}

const ComponentRendered = ({ value }): ReactElement => {
  const [shouldRender, setShouldRender] = useState(false);
  
  const conditionalRendering = (component1Variable) => {
    setShouldRender(component1Variable);
  };

  const component2 = (
    <div>Component 2 code</div>
  )

  return {(shouldRender && component2) || <></>};
}


//index.js

const Index = (): ReactElement => {
  const [value, setValue] = useState(false);
  return(
    <div>
      <ComponentRendered value={value} />
      <Component1 value={value} />
    </div>
  );
}

Answer 2

根据用途，您可以在父组件中使用简单的共享状态，也可以实现 Context provider.

父级共享状态的基本示例：

import React, { useState } from "react";

interface Component1Props {
  value: string;
  handleValueChange: (value: string) => void;
}

const Component1 = ({ value, handleValueChange }: Component1Props) => {
  return (
    <div>
      Component 1 code. value: {value}
      <br />
      <button onClick={() => handleValueChange("Vader")}>Change</button>
    </div>
  );
};

interface Component2Props {
  value: string;
}

const Component2 = ({ value }: Component2Props) => {
  // create a guard to conditionally display
  if (value === "Anakin") {
    return <></>;
  }

  return (
    <div>
      Component 2 code. value: {value}
      <br />
    </div>
  );
};

export default function App() {
  // shared state
  const [value, setValue] = useState<string>("Anakin");

  return (
    <div className="App">
      <Component1 value={value} handleValueChange={setValue} />
      <Component2 value={value} />
    </div>
  );
}

实施 Context 稍微复杂一些，更适合多个组件需要共享状态和功能的场景。

这是使用上下文的基本demo：

如何在 NextJS 中管理函数组件状态？

How to manage function component state in NextJS?

reactjs

next.js

react-state-management

react-state