运行 Javascript 以根据 JSX 中的 switch 语句加载某个组件

Question

解释起来有点棘手，所以标题可能不太清楚，但基本上我正在开发一个 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 行。我想做的事情是不可能的吗？或者如果可能的话我做错了什么？

Answer 1

基本上你只是定义一个函数，但从不调用它。

与您的示例类似，我定义了一个函数，但从未调用它。因此屏幕将是空白的。

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}

区别在于，后一个函数将立即被调用，而前一个函数将创建一个函数，但不会调用它。