Добавление переменной props в оператор JSX if

Question

Внутри моей функции рендеринга я хочу добавить сокращенную инструкцию if eles со значением prop.

<div>
   { flag ? 'overcharge' :
    <sup>$</sup>{total}
   }
</div> 

Мой линтер не позволяет мне. {amount} говорит Unexpected token should be '}' Кто-нибудь знает, как это исправить.

Answer 1

Вы упустили две вещи: закрывающие скобки и родительский div, который требуется при возврате элементов реагирования.

Используйте React.Fragment из реагирования v16.Это позволяет вам рендерить несколько компонентов на одном уровне без добавления дополнительного div в вашу DOM.

 {flag ? 'overcharge' : <React.Fragment><sup>$</sup> {total}</React.Fragment> }

Answer 2

Отсутствует закрытие }, и вы развернули JSX <sup>$</sup>{total}.

import React, { Component, Fragment } from 'react';

<div>
   { flag 
       ? 'overcharge'
       : <Fragment>
          <sup>$</sup>{total} 
         </Fragment>
   }
</div>