當年話下
2023-07-20 14:54:40
解釋起來有點棘手,所以標題可能不太清楚,但基本上我正在開發一個 ReactJS 項目,其中我有一個父組件,并且該組件將渲染其他組件,但基于各種道具或狀態將確定組件獲得什么已加載。我使用的是功能組件,最初是父組件返回方法上方的 if/switch 語句邏輯,然后將此變量放入父組件內的 JSX 中以呈現子組件。然而,這使得維護變得困難,因為它是一個相當大的父組件,因此想要使其更清晰,并發現您可以使用以下方法從 JSX 中運行一些 javascript{() => {//do stuff here }}因此,我的 JSX 中有以下代碼function ParentComponent(props){ return ( <div className='my-container'> { () => { console.log("Crash Details being loaded"); if (selectedCrashGroup === null) { switch (props.match.params.project_type) { case "Android": return ( <CrashSummary time_period={timePeriod} project_id={props.match.params.project_id} project_stats={projectStats} affected_files={affectedFiles}/> ) } } )}但是,執行此操作時,此方法中返回的組件不會被渲染,CrashDetails也CrashSummary不會寫入 console.log 行。我想做的事情是不可能的嗎?或者如果可能的話我做錯了什么?
1 回答

慕娘9325324
TA貢獻1783條經驗 獲得超4個贊
基本上你只是定義一個函數,但從不調用它。
與您的示例類似,我定義了一個函數,但從未調用它。因此屏幕將是空白的。
export default function App() {
return (
<div className="App">
{
(() => <h1>Hello React</h1>) /* HERE */
}
</div>
);
}
現在我們需要調用它。
<div className="App">
{
(() => <h1>Hello React</h1>) () /* here */
}
</div>
更好的方法
export default function App() {
// Defining a function
const content = () => <h1>Hello React</h1> ;
return (
<div className="App">
{ content() }
</div>
);
}
{() => {//do stuff here }} vs { 1+ 2 // any expression}
區別在于,后一個函數將立即被調用,而前一個函數將創建一個函數,但不會調用它。
添加回答
舉報
0/150
提交
取消