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

【问题标题】：How to render two const components in a conditional case in React JS?如何在 React JS 的条件情况下渲染两个 const 组件？
【发布时间】：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 是什么？语法发生了一些奇怪的事情，但是如果不查看更多内容，很难说出实际问题。
即使你让它工作严格模式仍然会抛出一个错误。您可能不应该在其他组件中创建组件。您应该导入它们并正常使用它们。它创建了更整洁的代码和文件夹结构。

标签： javascript reactjs jsx

【解决方案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 传递的组件？

【讨论】：