问这是一种呈现组件的标准方法吗？
EN

Stack Overflow用户

提问于 2020-11-23 01:41:20

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

下面的代码是一种基于状态变量的真实性/错误性来呈现组件的方法。(虽然我知道这是一个解决问题的平台，但我觉得我仍然有权利问以下问题(因为我最后发布的原因)。这种呈现组件/标签的方式是通用的/建议的吗？

//a functional component
return (
  <>
  {stateVariable && <ChildComponent>}
  </>
)

如我所见：

为什么我认为这是一个有效的所以问题:我记得之前的一个问题，在这个问题上，一个投了很多票的回答向我解释了我使用的函数，虽然它是有效的，但是被否决了。虽然这个问题的答案可能会受到意见的影响，但它可以帮助我避免使用今天起作用但明天不起作用的弃用代码。

回答已采纳

发布于 2020-11-23 01:47:15

以下代码

return (
  {stateVariable && <ChildComponent>}
)

单独作为react组件的JSX并不有效，因为组件必须返回JSX或null才能指示不呈现任何内容。

但是，如果有条件地呈现一些嵌套的UI，则语法是有效的，即

return (
  <>
    <h1>My Header Text</h1>
    {stateVariable && <ChildComponent>}
  </>
);

在第二个示例中，组件返回一个JSX节点，并在内部有条件地呈现ChildComponent。如果stateVariable是假的，那么它就会被React忽略。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64961554

复制

相似问题

问这是一种呈现组件的标准方法吗？EN