Question

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

      <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 |             ) : (

Answer 1

()是分组运算符，您不能在同一组中同时编写JSX和普通JS。必须使用花括号renderComponents()对JS（{}）进行转义。此外，您无法从组中返回多个包含元素，因此您必须将其包装在一个包含元素中（例如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>

Answer 2

您需要像这样在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>

您总是需要返回一个元素

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

2 个答案: