我想在組件2中訪問組件1的一個狀態變數，它們是 "兄弟 "組件。我怎樣才能做到這一點？只有一個狀態變數。我使用的是nextjs的styled-components和typecript。而且我的專案有原子式設計結構。 我想做的事情是：
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; //index.js.
const Index=（）。ReactElement => {
return(
<div>
<ComponentRendered />
<OtherComponents />>
</div>
);
}
uj5u.com熱心網友回復：
如果他們是兄弟組件，狀態應該由父組件管理，并作為道具傳遞給他們。
在你的例子中，我真的看不出你在哪里使用Component1，但它可能看起來像這樣：
const Component1=（{ value }）。ReactElement =>/span> {
return(
<div>Component 1 code</div>
);
}
const ComponentRendered = ({ value }): ReactElement =>/span> {
const [shouldRender, setShouldRender] = useState(false)。
const conditionalRendering = (component1Variable) => {
setShouldRender（component1Variable）。
};
const component2 = (
<div>Component 2 code</div>
)
return {(shouldRender && component2) || <>< />};
}
//index.js; //index.js.
const Index=（）。ReactElement => {
const [value, setValue] = useState(false)。
return(
<div>
<ComponentRendered value={value} />
<Component1 value={value} />
</div>/span>
);
}
uj5u.com熱心網友回復：
根據不同的用途，您可以在父組件中使用一個簡單的共享狀態，或者實作一個背景關系提供者。
。在父組件中使用共享狀態的一個基本例子：
import React, { useState } from "react"。
介面 Component1Props {
value: string;
handleValueChange: (value: string) => void;
}
const Component1 = ({ value, handleValueChange }: Component1Props) => {
return (
<div>
組件1的代碼。 值。{value}
<br />組件1代碼：{value}。
<button onClick={（） => handleValueChange("Vader")}>Change</button>
</div>/span>
);
};
介面 Component2Props {
value: string;
}
const Component2 = ({ value }: Component2Props) => {
//創建一個衛士來有條件地顯示。
if (value === "Anakin"/span>) {
return <></> 。
}
return (
<div>
組件2的代碼。 值。{value}
<br />組件2代碼：{value}。
</div>
);
};
export default function App（）{
//span>共享狀態。
const [value, setValue] = useState<string>("Anakin"/span>);
return (
<div className="App"/span>>
< Component1 value={value} handleValueChange={setValue} />
<Component2 value={value} />/span>
</div>/span>
);
}
實作Context的程序比較復雜，更適合于多個組件需要共享狀態和功能的場景。
以下是使用背景關系的基本演示：
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/322740.html
標籤：