停止函数触发之前，我调用它从三元渲染html

Question

我试图从三进制中有条件地调用函数，但是在我想要它之前似乎正在调用该函数…

我知道通常我可以通过做() => myFunc()来解决这个问题，但是这似乎不起作用并且破坏了我的构建。

const myFunc = () => {
if (typeof someVar === 'boolean') {
if (someVar) {
return <h1>BOOLEAN - TRUE</h1>
} else {
return <Redirect to={`/my-page`} />
}
} else {
return <h1>not boolean</h1>
}
}
return !somethingLoaded
? <h1>not loaded yet</h1>
: !extraThingLoaded
? <h1>Not quite finished</h1>
: myFunc()

按原样运行这段代码，在做任何事情之前调用<Redirect>。

I did attempt

!extraThingLoaded
? <h1>Not quite finished</h1>
: () => myFunc() // <-- Added this that usually works...

但是我得到错误:Functions are not valid as a React child

也尝试:

!extraThingLoaded
? <h1>Not quite finished</h1>
: {myFunc()}

似乎期望在函数名

之后有一个{。

Answer 1

const renderThings = ()=>{
if(somethingLoaded && extraThingLoaded){
x();
}else if(!somethingLoaded){
return <h1>not loaded yet</h1>
}else if(!extraThingLoaded){
return <h1>Not quite finished</h1>
}
}
return (<div>{renderThings()}</div>)