Не удается отобразить логическое значение в JSX?

#javascript #reactjs #redux #react-props

#javascript #reactjs

Вопрос:

Я пытаюсь отобразить логическое значение внутри JSX, однако React оценивает его как выражение и ничего не возвращает после возврата компонента.

Есть ли обходной путь для этого?

Вот пример

 var ipsumText = true;

ReactDOM.render(
  <div>
     Boolean Value:    {ipsumText}
  </div>,
  document.getElementById('impl')
);

Просто показывает скомпилированный HTML как

 <div data-reactid=".0"><span data-reactid=".0.0">Boolean Value:    </span></div>

РЕДАКТИРОВАТЬ: Вот ссылка на JSBin для примера http://jsbin.com/nibihodoce/1/edit?html ,js, вывод

ПРАВКА 2: Я уже изучил .Альтернатива toString(), однако, поскольку я выполняю итерацию по массиву объектов, и конкретное поле этого объекта может иметь значение типа string / integer / boolean. Применение .toString() для всех из них не кажется оптимальным.

Ответ №1:

 Boolean Value: { ipsumText.toString() }

или

 Boolean Value: { String(ipsumText) }

или

 Boolean Value: { ''   ipsumText }

или

 {`Boolean Value: ${ipsumText}`}

или

 Boolean Value: { JSON.stringify(ipsumText) }

Я предпочитаю второй вариант. Универсальный, быстрый, работает для всех примитивных типов: Boolean( smth ) , Number( smth ) .

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

2. React не допускает объект в качестве значений, но Vue показывает фактические значения, кроме undefined и null. Я полагаю, что он использует toString underhood, но почему react этого не сделает?

3. @Naren Angular в этом отношении работает так же, как в Vue, что, я думаю, является желательным поведением по умолчанию.

Ответ №2:

Вы можете преобразовать логическое значение в строку, объединив его с пустой строкой:

 var ipsumText = true;

ReactDOM.render(
  <div>
     Boolean Value: {ipsumText   ''}
  </div>,
  document.getElementById('impl')
);

Или вы можете сделать это, присваивая bool значение переменной:

 var ipsumText = true   '';

ReactDOM.render(
  <div>
     Boolean Value: {ipsumText}
  </div>,
  document.getElementById('impl')
);

Если ваша переменная может иметь не логическое значение, вам следует преобразовать ее в логическое:

 // `ipsumText` variable is `true` now.
var ipsumText = !!'text';

1. В случае, если значение не является логическим, я бы хотел показать его как есть.

2. В этом случае используйте это условие: var ipsumText = typeof value === 'boolean' ? value '' : value; Мы проверяем, является ли переменная логической, когда преобразуем ее в строку, в противном случае отображая ее как есть.

Ответ №3:

 <select>
    <option value={row.feature_product ? true: true || row.feature_product ? false: false}>
    {`${row.feature_product}`}
    </option>
    <option value={row.feature_product ? false: true || row.feature_product ? true: false}>
    {`${row.feature_product ? false: true}` || `${row.feature_product ? true: false}`}
    </option>
</select>