js的条件渲染(conditional rendering)

Posted 2023-04-28

参考技术A 对于以下视图树

如何实现视图树中的三目操作符呢

React 的做法是生成虚拟树，与旧树diff
在Vanilla js中怎么做？
视图树中的三目操作符实际上表达了两种操作：

删除节点好删，直接删了就是
添加节点呢，又分为两步

这插入到指定位置就麻烦了，需要知道要插入到哪个位置呢？信息不足啊。
有如下方案：

如何在 React JS 的条件情况下渲染两个 const 组件？

【中文标题】如何在 React JS 的条件情况下渲染两个 const 组件？

【英文标题】：How to render two const components in a conditional case in React JS?

【发布时间】：2022-01-19 23:37:15

【问题描述】：

我在我的 React 函数组件中声明了 2 个常量组件。 我正在尝试根据条件渲染它们，

      <Flex.Box w="90px" ml=1>
         mycondition
          ? ( staticButton )
          : ((
             staticButton )( conditionalButton ))
      </Flex.Box>

我正在尝试根据 mycondition 是真还是假来进行渲染。但是，我在控制台中收到以下错误。

TypeError: (intermediate value) is not a function

我做错了什么吗？

【问题讨论】：

你能分享更多你的代码吗？ mycondition 是什么，staticButton 和 conditionalButton 是什么？语法发生了一些奇怪的事情，但是如果不查看更多内容，很难说出实际问题。

即使你让它工作严格模式仍然会抛出一个错误。您可能不应该在其他组件中创建组件。您应该导入它们并正常使用它们。它创建了更整洁的代码和文件夹结构。

【参考方案1】：

你不能真正做到你在这里要求的。

如果您在另一个组件中创建组件，您仍然必须使用 Pascal Case。

您仍然需要将组件名称包装在< /> 中。你不能只返回一个函数。

相邻的组件需要在一个容器中。

function Example() 

  const condition = false;

  const StaticButton = () => <div>Static</div>;
  const ConditionalButton = () => <div>Conditional</div>;

  return (
    <div>
      condition
        ? <StaticButton />
        : (<div>
            <StaticButton />
            <ConditionalButton />
          </div>)
       
    </div>
  );
;

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

【参考方案2】：

看来您可以将staticButton 移出状态：

<Flex.Box w="90px" ml=1>
  staticButton
  mycondition ? conditionalButton : null
</Flex.Box>

【参考方案3】：

当你想在一个三元中同时渲染 2 个组件时，你应该将它们包装在一个片段中（staticButton conditionalButton）。我猜你的 2 const 是通过 props 传递的组件？