Как я могу отобразить функцию в компоненте без состояния чуть ниже другого компонента в условном выражении?

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

вам нужна обертка в содержимом реагирующего компонента, например:

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

, вам всегда нужно возвращать один элемент

Answer 2

() является оператором группировки, и вы не можете записать 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>