如何在条件内的另一个组件下方的无状态组件上呈现函数？答案

【问题标题】：How can I render a function on a stateless component just below another component within a conditional?如何在条件内的另一个组件下方的无状态组件上呈现函数？
【发布时间】：2019-05-30 13:50:11
【问题描述】：

我有一个无状态组件，我使用条件渲染一些组件：

      <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>

当<TableToolbarComp /> 和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 |             ) : (
  84 |               <div className="login-settings__message">
  85 |                 <UpgradeMessage />

即使我将{} 设置在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 |             ) : (

【问题讨论】：

您收到的错误信息是什么？
你没有说错误信息是什么，但我知道你不能在这样的 JSX 标记之后放置函数调用；这是一个语法错误。
@dan 查看帖子更新
renderComponents() 函数中有什么？

标签： javascript reactjs ecmascript-6 jsx

【解决方案1】：

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

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

【讨论】：

我仍然收到该语法错误：SyntaxError: /Users/marceloretana/Documents/forks/billing/src/client/pages/Cancellations/index.js: Unexpected token, expected "," (82:14) 80 | {softlayerAccountId ? ( 81 | <TableToolbarComp /> > 82 | { renderComponents() } | ^ 83 | ) : (
@Reacting 更新了我的答案，让我知道这是否有效
(...) 是普通的JavaScript grouping operator。它与 React 或 JSX 无关。你也不能用“普通的 JavaScript”写softlayerAccountId ? (foo() renderComponents()) : (bar())。
@FelixKling 相应地更新了我的答案

【解决方案2】：

你需要像这样的反应组件内容中的包装器

  <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>

你总是需要返回一个元素

【讨论】：