运行Javascript以从JSX中基于switch语句加载某个组件
运行Javascript以从JSX中基于switch语句加载某个组件
提问于 2020-11-08 16:10:42
解释起来有点棘手，所以标题可能不太清楚，但基本上我正在处理一个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行也不会被写入。
我所试图做的是不可能的，或者如果有可能，我做错了什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-11-08 16: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>
);
}{() => {//do stuff here }} vs { 1+ 2 // any expression}
不同的是，后者将在前面的函数创建的地方立即调用，但不会调用它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64740240
复制相关文章
相似问题
腾讯云开发者
