從 function 返回值並在 react jsx 中使用

Question

我有一個 JSX 代碼，我需要在其中調用 Javascript pure function，它返回一個值並使用該值，如下所示

<ListItemText title={"Details"} primary={<span className={compStyle && classes[compStyle]}></span>} secondary={content} />

純 JS 函數：

const getDetails = (arrDetails, time1, time2) =>{
    //execute business logic and return string
    return "Details here"
 }

我如何在ListItemText JSX 中調用getDetails function 並獲取返回值並在title={"Details"}和同一 JSX 中的span等其他地方使用它？

Answer 1

您不能直接在 JSX 中重復使用 function 計算。 但是，您可以將結果存儲在一個變量中，然后將其傳遞給 JSX 中的不同組件 props。

const ListItemTextWithDetails = () => {
   const details = getDetails()

   // here we are passing `details` to two properties 
   // in this way reusing the computed value
   return <ListItemText title={details} primary={<span>{details}</span>} />
}

// somewhere else - render that component
<ListItemTextWithDetails />

Answer 2

你可以使用 IIFE

(() => {
 const val = getDetails();
 return <ListItemText title={val} primary={<span className={compStyle && classes[compStyle]}></span>} secondary={val} />
})()