问运行Javascript以从JSX中基于switch语句加载某个组件
EN

Stack Overflow用户

提问于 2020-11-08 08:10:42

回答 1查看 48关注 0票数 0

解释起来有点棘手，所以标题可能不太清楚，但基本上我正在处理一个ReactJS项目，其中我有一个父组件，这个组件将呈现其他组件，但是基于不同的道具或状态将决定加载哪个组件。

我使用的是一个函数组件，最初是父组件返回方法上面的if/switch语句逻辑，然后将这个变量放在父组件内的JSX中来呈现子组件。但是，这使得它很难维护，因为它是一个相当大的父组件，因此想让它更加清楚，并发现您可以使用{() => {//do stuff here }}从JSX内部运行一些javascript。

因此，我的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>
    )
}

但是，这样做--在此方法中返回的组件-- CrashDetails和CrashSummary不会被呈现，console.log行也不会被写入。

我所试图做的是不可能的，或者如果有可能，我做错了什么？

reactjs

javascript

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-11-08 08:44:01

基本上，您只是定义了一个函数，但从未调用它。

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

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