我是 React 的新手，并試圖理解使用帶有條件渲染的道具。我的 app.js 中有一個名為 Intro.js 的組件。
我的目標是單擊Intro.js中表單上的按鈕并從 app.js 中洗掉 Intro 我已經能夠使用app.js中的按鈕完成此操作，但 Intro.js 中卻沒有。我如何讓它在子組件 Intro.js 中作業
const [introSection, setIntroSection] = useState(false)
{
introSection ? <Intro /> : true
}
<Button onClick={() => setIntro(false)}> Remove Intro Section</Button>
uj5u.com熱心網友回復：
首先，您的狀態更新也與實際功能不一致。它應該setIntroSection代替setIntro
<Button onClick={() => setIntroSection(false)}> Remove Intro Section</Button>
你的邏輯差不多了。你只需要修改你的邏輯，如下所示
{
introSection ? <Intro /> : null
}
<Button onClick={() => setIntroSection(false)}> Remove Intro Section</Button>
但是當我們在真實路徑中有非常復雜的結構時，這不是一個好方法，所以我個人更喜歡這種方式
{introSection && <Intro />} //when it's false, nothing is rendered
<Button onClick={() => setIntroSection(false)}> Remove Intro Section</Button>
如果你想在里面做Intro，你可以傳遞一個道具
<Intro isHidden={true} />
而且Intro，你可以有這個邏輯
const Intro = ({ isHidden }) => {
if(isHidden) {
return null
}
//true path to render your own component
return <div></div>
}
uj5u.com熱心網友回復：
您應該將 setIntro/setIntroSection（這取決于您如何使用它）函式作為道具傳遞給 Intro 組件，這樣您就可以訪問和使用該狀態函式。我希望這有幫助。
uj5u.com熱心網友回復：
使用 setIntroSection，而不是 setIntro。
一大堆代碼將有助于回答。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/456298.html
標籤：javascript 反应
上一篇：Javascript如何從陣列中獲取非重復資料？[復制]
下一篇：為什么切片不切片陣列？[復制]