第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

運(yùn)行 Javascript 以根據(jù) JSX 中的 switch 語(yǔ)句加載某個(gè)組件

運(yùn)行 Javascript 以根據(jù) JSX 中的 switch 語(yǔ)句加載某個(gè)組件

當(dāng)年話下 2023-07-20 14:54:40
解釋起來(lái)有點(diǎn)棘手,所以標(biāo)題可能不太清楚,但基本上我正在開(kāi)發(fā)一個(gè) ReactJS 項(xiàng)目,其中我有一個(gè)父組件,并且該組件將渲染其他組件,但基于各種道具或狀態(tài)將確定組件獲得什么已加載。我使用的是功能組件,最初是父組件返回方法上方的 if/switch 語(yǔ)句邏輯,然后將此變量放入父組件內(nèi)的 JSX 中以呈現(xiàn)子組件。然而,這使得維護(hù)變得困難,因?yàn)樗且粋€(gè)相當(dāng)大的父組件,因此想要使其更清晰,并發(fā)現(xiàn)您可以使用以下方法從 JSX 中運(yùn)行一些 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}/>                                    )                            }                        }     )}但是,執(zhí)行此操作時(shí),此方法中返回的組件不會(huì)被渲染,CrashDetails也CrashSummary不會(huì)寫(xiě)入 console.log 行。我想做的事情是不可能的嗎?或者如果可能的話我做錯(cuò)了什么?
查看完整描述

1 回答

?
慕娘9325324

TA貢獻(xiàn)1783條經(jīng)驗(yàn) 獲得超4個(gè)贊

基本上你只是定義一個(gè)函數(shù),但從不調(diào)用它。


與您的示例類似,我定義了一個(gè)函數(shù),但從未調(diào)用它。因此屏幕將是空白的。


export default function App() {

  return (

    <div className="App">

      { 

        (() => <h1>Hello React</h1>)   /* HERE */

      }

    </div>

  );

}

現(xiàn)在我們需要調(diào)用它。


<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}

區(qū)別在于,后一個(gè)函數(shù)將立即被調(diào)用,而前一個(gè)函數(shù)將創(chuàng)建一個(gè)函數(shù),但不會(huì)調(diào)用它。


查看完整回答
反對(duì) 回復(fù) 2023-07-20
  • 1 回答
  • 0 關(guān)注
  • 286 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)