无法在 JSX 中呈现布尔值？

小能豆

无法在 JSX 中呈现布尔值？

javascript

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

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

阅读 37

2024-06-12

共1个答案

小能豆

直接在 JSX 中渲染布尔值确实会导致它们被忽略，因为 React 不会直接在 DOM 中渲染true。false相反，您可以在渲染时将布尔值转换为字符串。由于您想避免.toString()对所有类型使用通用方法，因此可以使用条件渲染方法来动态处理不同的数据类型。

以下是处理布尔值以及字符串和数字的渲染的方法：

var ipsumText = true;

function renderValue(value) {
  if (typeof value === 'boolean') {
    return value.toString();
  }
  return value;
}

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

在此方法中，renderValue函数会检查值的类型并将布尔值转换为字符串。这样，您就避免了应用于.toString()所有值，而只在必要时转换布尔值。

如果您有一个具有不同类型值的对象数组，并且需要对它们进行迭代，则可以在 map 函数中应用相同的逻辑：

var items = [
  { id: 1, value: "Hello" },
  { id: 2, value: 123 },
  { id: 3, value: true },
  // Add more items as needed
];

function renderValue(value) {
  if (typeof value === 'boolean') {
    return value.toString();
  }
  return value;
}

ReactDOM.render(
  <div>
    {items.map(item => (
      <div key={item.id}>
        Value: {renderValue(item.value)}
      </div>
    ))}
  </div>,
  document.getElementById('impl')
);

这样，您可以在呈现对象数组时适当地处理不同的数据类型。

2024-06-12