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

Question

I have a stateless component where I am using a conditional to render some components:

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

When <TableToolbarComp /> and renderComponents() were not inside the conditional, it was working good, but now it is throwing a parsing error message.

What can I do?

Error:

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

Even if I set {} around renderComponents() I get this

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

The () is the grouping operator, and you cannot write both JSX and plain JS in the same group. The JS ( renderComponents() ) has to be escaped using curly braces {} . Furthermore, you cannot return multiple containing elements from the group, so you either have to wrap it in a containing element (ie a div ) or if you don't want additional markup, you can use 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

you need wrapper in react component content like this

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

you always need return one element