亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

運行 Javascript 以根據 JSX 中的 switch 語句加載某個組件

運行 Javascript 以根據 JSX 中的 switch 語句加載某個組件

當年話下 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}

區別在于,后一個函數將立即被調用,而前一個函數將創建一個函數,但不會調用它。


查看完整回答
反對 回復 2023-07-20
  • 1 回答
  • 0 關注
  • 275 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號