我正在使用反應，但我找不到如何在 gatsby 中條件渲染這個示例。主要目標是每次我更改值時重新渲染子組件，但我不想只重新渲染所有網站的子組件
import * as React from "react"
let i=1;
const Test = () => {
return (
<main>
<button onClick={()=>{i=i 1;console.log(i) }}>CLICK ON ME</button>
<Child></Child>
</main>
)
}
export default Test
const Child = () => {
if(i===1){
return(
<div >
1
</div>
)
}
if(i===2){
return(
<div >
2
</div>
)
}
if(i===3){
return(
<div >
3
</div>
)
}
else{
return(
<div >
4
</div>
)
}
}
uj5u.com熱心網友回復：
Gatsby 是一個基于 React 的框架，它在底層使用 React，因此組件和狀態管理與 Reacts 相同。
在您的情況下，嘗試使用useState鉤子呈現Child，將整數傳遞為props：
const Test = () => {
const [i, setI] = useState(1)
return (
<main>
<button onClick={()=>{setI(i 1);console.log(i) }}>CLICK ON ME</button>
<Child i={i} />
</main>
)
}
在Child組件中：
const Child = ({ i }) => {
return <div>{i}</div>
}
如果您想根據 i 值有條件地渲染不同的組件，只需使用：
const Child = ({ i }) => {
return <>
{i==1 && <div>Some rendered content when i==1</div>}
{i==2 && <div>Some rendered content when i==2</div>}
</>
}
React 的狀態管理只會重新水化（渲染）已相應更改的所需部分。在這種情況下，因為您正在i使用函式更改值setI，所以它將重新水合孩子使用props.
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/415568.html
標籤：
上一篇：未檢索CSS模塊值