如何管理功能组件状态在NextJS?

Question

我想在组件2中访问组件1的状态变量，它们是"兄弟"组件。我该怎么做呢?只有一个状态函数。我使用带有样式组件和typescript的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

如果它们是兄弟组件，则状态应该由父组件管理，并作为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

根据使用情况，您可以在父组件中使用简单的共享状态，也可以实现上下文提供程序。

父节点共享状态的基本示例:

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的基本示例: