在 gatsby 中重新渲染组件

Question

我正在使用 react，但我找不到如何在 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>
            )
        }
      
      
    
    
    }

Answer 1

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 的状态管理只会再水化（渲染）已相应更改的所需部分。在这种情况下，因为您正在使用 setI 函数更改 i 值，所以它将重新水化使用 props 更改提升的值的孩子。