运行 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() {&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; (() => <h1>Hello React</h1>)&nbsp; &nbsp;/* HERE */&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </div>&nbsp; );}现在我们需要调用它。<div className="App">&nbsp; &nbsp; &nbsp; {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; (() => <h1>Hello React</h1>) ()&nbsp; &nbsp;/* here */&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </div>更好的方法export default function App() {&nbsp; // Defining a function&nbsp; const content = () => <h1>Hello React</h1> ;&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; { content() }&nbsp; &nbsp; </div>&nbsp; );}代码沙盒{() => {//do stuff here }} &nbsp;vs { 1+ 2 // any expression}区别在于，后一个函数将立即被调用，而前一个函数将创建一个函数，但不会调用它。