P粉5338986942023-08-19 15:04:37
所以我认为发生这种情况的原因是,在ConditionalRenderComponent
组件中,子元素被作为属性传递给它(就像函数的参数一样)。JSX表达式被作为函数的参数进行评估。
这意味着即使condition
为false,children
在传递给ConditionalRenderComponent
函数之前仍然会被评估。
你把一个PlayStation
(在你的左手)和数学试卷成绩
(在你的右手)给了一个孩子,并说如果他/她的分数超过90/100,他/她就会得到PlayStation。
由于孩子已经可以看到你左手中的PlayStation(将children
作为JSX表达式传递),他/她在检查条件之前就已经开始使用了。
现在,如果你握紧你的拳头,相当于将children
作为函数传递,他/她在检查你右手中的条件是否为真之前无法评估左手中的内容。
我们通过使用一个函数作为子元素来修改我们的自定义组件,而不是直接在组件中渲染children
。这样,您可以确保只有在condition
为真时才会评估children
。
function ConditionalRenderComponent({ condition, children }) { return ( <div> {condition && children()} </div> ); }
<ConditionalRenderComponent condition={isLoggedIn}> {() => ( <div> <p>你好,{userData.username}!</p> <p>你的电子邮件:{userData.email}</p> </div> )} </ConditionalRenderComponent>
P粉5433443812023-08-19 13:02:01
我不建议为条件渲染创建一个组件,但如果你想这样做,你可以使用渲染属性模式,这样只有在条件为真时才调用函数。这样可以防止表达式立即被评估。
function If({ condition, render }) { if (!condition) return null; return render(); } export default function App() { const [state, setState] = useState(null); useEffect(() => { wait(1000).then(() => { setState({ hello: "world" }); }); }, []); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <If condition={Boolean(state)} render={() => <p>{state.hello}</p>} /> </div> ); }