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

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

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

-1
me-me 16 Сен 2018 в 19:27

2 ответа

Лучший ответ

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

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

<div>
   { flag 
       ? 'overcharge'
       : <Fragment>
          <sup>$</sup>{total} 
         </Fragment>
   }
</div>
1
Matt Carlotta 16 Сен 2018 в 16:38

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

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

 {flag ? 'overcharge' : <React.Fragment><sup>$</sup> {total}</React.Fragment> }
0
Sakhi Mansoor 16 Сен 2018 в 16:43