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

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.JS(renderComponents())必须使用花括号进行转义{}.此外,您不能从组中返回多个包含元素,因此您必须将其包装在包含元素(即a 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>