Javascript 无法在 JSX 中呈现布尔值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38337262/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot render boolean value in JSX?
提问by anuj_io
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.
我试图在 JSX 中呈现布尔值，但是 React 将它作为表达式进行评估，并且在返回组件后不返回任何内容。
Any workaround for this?
有什么解决方法吗？
Here is an example
这是一个例子
var ipsumText = true;
ReactDOM.render(
<div>
Boolean Value: {ipsumText}
</div>,
document.getElementById('impl')
);
Just shows compiled HTML as
只是将编译后的 HTML 显示为
<div data-reactid=".0"><span data-reactid=".0.0">Boolean Value: </span></div>
EDIT:Here is the JSBin link for the example http://jsbin.com/nibihodoce/1/edit?html,js,output
编辑：这是示例http://jsbin.com/nibihodoce/1/edit?html,js,output的 JSBin 链接
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.
编辑 2：我已经探索了 .toString() 替代方案，但是因为我正在迭代对象数组，并且该对象的特定字段可以具有字符串/整数/布尔值类型。将 .toString() 应用于所有 'em 似乎不是最佳的。
回答by gaperton
Boolean Value: { ipsumText.toString() }
UPD: or
更新：或
Boolean Value: { String(ipsumText) }
or
或者
Boolean Value: { '' + ipsumText }
or
或者
{`Boolean Value: ${ipsumText}`}
or
或者
Boolean Value: { JSON.stringify(ipsumText) }
I prefer the second option. Universal, fast, works for all primitive types: Boolean( smth ), Number( smth ).
我更喜欢第二种选择。通用，快速，适用于所有原始类型： Boolean( smth ), Number( smth ).
回答by 1ven
You can convert boolean value to string, concatenating it with empty string:
您可以将布尔值转换为字符串，并将其与空字符串连接：
var ipsumText = true;
ReactDOM.render(
<div>
Boolean Value: {ipsumText + ''}
</div>,
document.getElementById('impl')
);
Or you can do it, when assigning boolvalue to variable:
或者您可以在bool为变量赋值时执行此操作：
var ipsumText = true + '';
ReactDOM.render(
<div>
Boolean Value: {ipsumText}
</div>,
document.getElementById('impl')
);
If your variable can have not boolean value, you should convert it to boolean:
如果您的变量不能有布尔值，则应将其转换为布尔值：
// `ipsumText` variable is `true` now.
var ipsumText = !!'text';
回答by Jake Smith
<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>
