条件渲染 + 在 React 中添加一些额外的代码

Question

我知道 React 组件的一些条件渲染方法。其中一些可以找到 here.

使用三元运算符，if...elses...。但我想知道是否有一种方法可以根据条件渲染组件并在渲染之前执行一些计算.

正常的条件渲染将如下所示：

<>
   {myCondition && (<MyComponent /)}
</>

但是我需要知道是否可以这样做，就像这样

<>
   {myCondition && 
       const myVars = 'Some random vars I need'; // try to gather some info before rendering the component
       return <MyComponent vars={myVars} />
    }
</>

有没有办法在渲染前执行这个操作？

Answer 1

您可以像这样使用 useState、useEffect 挂钩和一些 if 运算符：

const [myVars, SetMyVars] = useState("")
const [myCondition, SetMyCondition] = useState(false)
    
useEffect(() => {
    if(myCondition) {
      SetMyVars("something")
    }
},[myCondition])
    
    return (
       {myCondition && <MyComponent vars={myVars} /> }
    )

然后你可以添加一些代码来改变你的条件等等

Answer 2

有条件地呈现内容的最佳方式是定义辅助函数并立即调用它。

import React from 'react'

const renderContent = ()=>{
    // add some logic here
    // all sort of things you can imagine
    // include if statements containing return statements
}

function tryThis() {
  return (
    <div>{renderContent()}</div>
  )
}

export default tryThis

条件渲染 + 在 React 中添加一些额外的代码

Conditional render + add some extra code in React

components

jsx

reactjs