无法在JSX中呈现布尔值? [英] Cannot render boolean value in JSX?

问题描述

我正在尝试在JSX内渲染布尔值，但是React将其作为表达式进行评估，并且在返回组件后未返回任何内容.

I am trying to render boolean value inside JSX, however React is evaluating it as expression and isn't returning anything after the component is returned.

有任何解决方法吗?

这里是一个示例

var ipsumText = true;

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

仅将已编译的HTML显示为

Just shows compiled HTML as

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

编辑:这是示例 http://jsbin.com/nibihodoce/1/edit?html,js，输出

我已经研究过.toString()替代方法，但是由于我要遍历对象数组，并且该对象的特定字段可以具有字符串/整数/布尔类型的价值.将.toString()应用于所有'em似乎不是最佳选择.

EDIT 2: I have already explored the .toString() alternative, however since I am iterating over an array of objects and a particular field of that object can have string/integer/boolean kind of value. Applying .toString() to all of 'em doesn't seem optimal.

推荐答案

Boolean Value: { ipsumText.toString() }

或

Boolean Value: { String(ipsumText) }

或

Boolean Value: { '' + ipsumText }

或

{`Boolean Value: ${ipsumText}`}

或

Boolean Value: { JSON.stringify(ipsumText) }

我更喜欢第二种选择.通用，快速，适用于所有原始类型: Boolean(smth)， Number(smth).

I prefer the second option. Universal, fast, works for all primitive types: Boolean( smth ), Number( smth ).

这篇关于无法在JSX中呈现布尔值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！