无法在 JSX 中呈现布尔值？

Posted 2023-02-16

【中文标题】无法在 JSX 中呈现布尔值？

【英文标题】：Cannot render boolean value in JSX?

【发布时间】：2016-11-15 04:34:04

【问题描述】：

我正在尝试在 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() 应用于所有这些似乎并不理想。

【问题讨论】：

“将 .toString() 应用于所有的 'em 似乎不是最优的”——然后使用 String( value ) 。没有什么比这更理想和更普遍了。

【参考方案1】：

您可以将布尔值转换为字符串，将其与空字符串连接：

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';

【讨论】：

如果值不是布尔值，我希望按原样显示。

在这种情况下，使用这个条件：var ipsumText = typeof value === 'boolean' ? value + '' : value; 我们正在检查变量是否为布尔值，当我们将其转换为字符串时，否则按原样显示。

【参考方案2】：

Boolean Value:  ipsumText.toString() 

或

Boolean Value:  String(ipsumText) 

或

Boolean Value:  '' + ipsumText 

或

`Boolean Value: $ipsumText`

或

Boolean Value:  JSON.stringify(ipsumText) 

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

【讨论】：

为什么我们需要做类型转换？为什么不能直接布尔显示？

React 不允许对象作为值，但Vue 确实显示了除未定义和空值之外的实际值。我相信它正在使用 toString underhood，但为什么 react 不会这样做？

@Naren Angular 在这方面与 Vue 中的工作方式相同，我认为这是理想的默认行为。

【参考方案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>

【讨论】：

请解释你的答案。