运行Javascript以基于JSX中的switch语句加载特定组件

解释起来有点棘手，所以标题可能不太清楚，但基本上我正在做一个ReactJS项目，我有一个父组件，这个组件将呈现其他组件，但根据各种道具或状态将确定加载哪个组件

我使用的是一个函数组件，最初是父组件返回方法上方的if/switch语句逻辑，然后将此变量放在父组件内的JSX中以呈现子组件。然而，这使得它很难维护，因为它是一个相当大的父组件，因此希望更清楚地说明这一点，并发现可以使用

{（）=>{//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}/>
                                    )
                            }
                        } else {
                            return (
                                <CrashGroupDetails refreshCrashGroupData={refreshCrashGroupData}
                                            crashGroup={selectedCrashGroup}
                                            project_id={props.match.params.project_id}
                                            handleUserAssignmentClick={handleUserAssignmentClick}
                                            projectMembers={projectMembers}
                                            selectedAssignmentDetails={selectedAssignmentDetails}
                                            projectType={props.match.params.project_type}
                                            comment_id={props.match.params.comment_id}/>
                            )
                    }
                }
            }
        </div>
    )
}

函数父组件（道具）
{
返回(
{
() => {
console.log（“正在加载的崩溃详细信息”）；
如果（selectedCrashGroup==null）{
开关（props.match.params.project_类型）{
案例“Android”：
返回(
)
}
}否则{
返回(
)
}
}
}
)
}

但是，执行此操作时，将不会呈现在此方法中返回的组件，

CrashDetails

和

CrashSummary

也不会写入console.log行

---

我想做的是不可能的，或者如果可能的话，我做错了什么？

基本上你只是定义了一个函数，但从来没有调用过它

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

export default function App() {
  return (
    <div className="App">
      { 
        (() => <h1>Hello React</h1>)   /* HERE */
      }
    </div>
  );
}

导出默认函数App（）{
返回(
{ 
（（）=>你好反应）/*这里*/
}
);
}

现在我们需要给它打电话

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

导出默认函数App（）{
//定义函数
const content=（）=>Hello React；
返回(
{content（）}
);
}

{（）=>{//do stuff here}}vs{1+2//any expression}

---

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

基本上，您只是定义一个函数，而从不调用它

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

export default function App() {
  return (
    <div className="App">
      { 
        (() => <h1>Hello React</h1>)   /* HERE */
      }
    </div>
  );
}

导出默认函数App（）{
返回(
{ 
（（）=>你好反应）/*这里*/
}
);
}

现在我们需要给它打电话

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

导出默认函数App（）{
//定义函数
const content=（）=>Hello React；
返回(
{content（）}
);
}

{（）=>{//do stuff here}}vs{1+2//any expression}

---

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

您不需要if/switch语句，请使用三元运算符。是的，我知道三级if语句，它们将是其他的东西，这只是使它工作的基础。尽管您不需要if/switch语句，但请使用三元运算符。是的，我知道三级if语句，它们将是其他的东西，这只是使它工作的基础。Thank ThoughThank，这意味着if语句逻辑将位于父组件返回方法之前。这就是我最初的想法，我希望避免仅仅从JSX中调用方法/变量，因为调试代码时很难找到它。我不记得在哪里看到过它，但看起来你可以在JSX中有一个方法，它会自动得到Triggeredum。。在JSX内部，只有显式调用或附加到事件侦听器时，才会调用方法。事件发生时，将调用回调方法：）谢谢，这真的很管用。不太清楚我是怎么记得的，但我想我一定错过了什么，这已经完成了我在汉克之后的工作，这意味着if语句逻辑将在父组件返回方法之前。这就是我最初的想法，我希望避免仅仅从JSX中调用方法/变量，因为调试代码时很难找到它。我不记得在哪里看到过它，但看起来你可以在JSX中有一个方法，它会自动得到Triggeredum。。在JSX内部，只有显式调用或附加到事件侦听器时，才会调用方法。事件发生时，将调用回调方法：）谢谢，这真的很管用。不太清楚我是怎么记得的，但我想我一定错过了什么，这就是我想要的