无法在 JSX 中呈现布尔值?

IT技术 javascript reactjs react-jsx
2021-03-30 08:33:14

我试图在 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>

编辑:这是示例http://jsbin.com/nibihodoce/1/edit?html,js,output的 JSBin 链接

编辑 2:我已经探索了 .toString() 替代方案,但是因为我正在迭代对象数组,并且该对象的特定字段可以具有字符串/整数/布尔值类型。将 .toString() 应用于所有 'em 似乎不是最佳选择。

3个回答
Boolean Value: { ipsumText.toString() }

或者

Boolean Value: { String(ipsumText) }

或者

Boolean Value: { '' + ipsumText }

或者

{`Boolean Value: ${ipsumText}`}

或者

Boolean Value: { JSON.stringify(ipsumText) }

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

为什么我们需要进行类型转换?为什么不能直接布尔显示?
2021-05-31 08:33:14
React 不允许对象作为值,但Vue确实显示了除 undefined 和 null 之外的实际值。我相信它正在使用引擎盖,toString但为什么反应不会这样做?
2021-06-10 08:33:14
@Naren Angular 在这方面与 Vue 中的工作方式相同,我认为这是理想的默认行为。
2021-06-16 08:33:14

您可以将布尔值转换为字符串,并将其与空字符串连接:

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';
如果该值不是布尔值,我希望按原样显示它。
2021-05-24 08:33:14
在这种情况下,使用以下条件:var ipsumText = typeof value === 'boolean' ? value + '' : value;我们正在检查变量是否为布尔值,当我们将其转换为字符串时,否则按原样显示。
2021-05-24 08:33:14
<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>
请解释你的答案。
2021-06-05 08:33:14