Javascript 如何在一个无状态组件上呈现一个函数，该组件正好位于条件域中另一个组件的下方？

我有一个无状态组件，其中我使用条件来呈现一些组件：

      <div className="bx--col-md-12 bx--offset-xxl-1 bx--col-xxl-10">
        {softlayerAccountId ? (
          <TableToolbarComp />
          renderComponents()
        ) : (
          <div className="login-settings__message">
            <UpgradeMessage />
          </div>
        )}
      </div>

即使我在

renderComponents（）

周围设置了

{}

，我也会得到这个结果

SyntaxError: /Users/marceloretana/Documents/forks/billing/src/client/pages/Cancellations/index.js: Unexpected token, expected "," (82:14)

  80 |             {softlayerAccountId ? (
  81 |               <TableToolbarComp />
> 82 |               { renderComponents() }
     |               ^
  83 |             ) : (

SyntaxError:/Users/marceloretana/Documents/forks/billing/src/client/pages/Cancellations/index.js：意外令牌，预期“，”（82:14）
80 |{softlayerAccountId(
81 |               
>82 |{renderComponents（）}
|               ^
83 |             ) : (
这个
（）
是分组运算符，您不能在同一个组中同时编写JSX和普通JS。JS（
renderComponents（）
）必须使用大括号
{}
进行转义。此外，您不能从组中返回多个包含元素，因此您必须将其包装在包含元素中（即
div
）或如果不需要额外的标记，可以使用：


{softlayerAccountId(
{renderComponents（）}
) : (
)}
这个
（）
是分组运算符，您不能在同一个组中同时编写JSX和普通JS。JS（
renderComponents（）
）必须使用大括号
{}
进行转义。此外，您不能从组中返回多个包含元素，因此您必须将其包装在包含元素中（即
div
）或如果不需要额外的标记，可以使用：


{softlayerAccountId(
{renderComponents（）}
) : (
)}
在react组件内容中需要这样的包装器

  <div className="bx--col-md-12 bx--offset-xxl-1 bx--col-xxl-10">
        {softlayerAccountId ? (
          <div>
            <TableToolbarComp />
             {renderComponents()}
          </div>
        ) : (
          <div className="login-settings__message">
            <UpgradeMessage />
          </div>
        )}
      </div>


{softlayerAccountId(
{renderComponents（）}
) : (
)}

您总是需要返回一个元素
在react组件内容中需要这样的包装器

  <div className="bx--col-md-12 bx--offset-xxl-1 bx--col-xxl-10">
        {softlayerAccountId ? (
          <div>
            <TableToolbarComp />
             {renderComponents()}
          </div>
        ) : (
          <div className="login-settings__message">
            <UpgradeMessage />
          </div>
        )}
      </div>


{softlayerAccountId(
{renderComponents（）}
) : (
)}

您总是需要返回一个元素
您得到的错误消息是什么？您没有说错误消息是什么，但我知道您不能将函数调用放在像这样的JSX标记之后；这是一个语法错误。@dan请参阅文章的更新
renderComponents（）中的内容
function？您收到的错误消息是什么？您没有说错误消息是什么，但我知道您不能将函数调用放在这样的JSX标记之后；这是一个语法错误。@dan请参阅post上的更新
renderComponents（）中的内容
function？我仍然收到语法错误：
SyntaxError:/Users/marceloretana/Documents/forks/billing/src/client/pages/Cancellations/index.js:意外令牌，预期“，”（82:14）80 |{softlayerAccountId？（81 |>82 |{renderComponents（））|^83 |）：（
@reactive更新了我的答案，让我知道这是否有效。
（…）
是正常的。它与React或JSX无关。你将无法在“正常JavaScript”中编写
softlayerAccountId？（foo（）renderComponents（））：（bar（））
或者。@FelixKling相应地更新了我的答案，但我仍然发现语法错误：
SyntaxError:/Users/marceloretana/Documents/forks/billing/src/client/pages/Cancellations/index.js:意外标记，预期“，”（82:14）80 |{softlayerAccountId？（81 |>82 |{renderComponents（））|^83 |）：（
@reactive更新了我的答案，让我知道这是否有效。
（…）
是正常的。它与React或JSX无关。你将无法在“正常JavaScript”中编写
softlayerAccountId？（foo（）renderComponents（））：（bar（））
要么。@FelixKling相应地更新了我的答案
  <div className="bx--col-md-12 bx--offset-xxl-1 bx--col-xxl-10">
        {softlayerAccountId ? (
          <div>
            <TableToolbarComp />
             {renderComponents()}
          </div>
        ) : (
          <div className="login-settings__message">
            <UpgradeMessage />
          </div>
        )}
      </div>