在 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-based 框架，它在底层使用 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 值，它将重新水化 child 更改使用 props.

提升的值

在 gatsby 中重新渲染一个组件

Re-render a component in gatsby

render

conditional-statements

reactjs

gatsby