如何在 React JS 的條件情況下渲染兩個 const 組件？

Question

我在我的 React 功能組件中聲明了 2 個常量組件。 我正在嘗試根據條件渲染它們，

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

我正在嘗試根據 mycondition 是真還是假來進行渲染。 但是，我在控制台中收到以下錯誤。

TypeError: {(intermediate value)} is not a function

我做錯什么了嗎？

Answer 1

當你想在一個三元中同時渲染 2 個組件時，你應該將它們包裝在一個片段中 (<>{staticButton} {conditionalButton}<>)。 我猜你的 2 const 是通過道具傳遞的組件嗎？

Answer 2

看來您可以將staticButton移出狀態：

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

Answer 3

你不能真的做你在這里問的事情。

1. 如果您在另一個組件中創建組件，您仍然必須使用 Pascal Case。

2. 您仍然需要將組件名稱包裝在< />中。 您不能只返回 function。

3. 相鄰的組件需要在一個容器中。

 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>