React 18/TypeScript函数组件Props无法渲染显示问题求助

React 18中，布尔值true属于会被忽略渲染的特殊值类型，同类的还有null、undefined。这类值在控制台能正常打印，但直接放在JSX中时，React不会自动将其转换为字符串输出，因此你看不到预期的true文本。

可行的解决方法 #

以下几种方式都能将布尔值转换为字符串并正常渲染：

• 使用String()函数强制转换类型：

  <h2>here is what you sent: {String(theData)}</h2>
  

• 调用值自身的toString()方法：

  <h2>here is what you sent: {theData.toString()}</h2>
  

• 通过拼接空字符串触发隐式类型转换：

  <h2>here is what you sent: {theData + ''}</h2>
  

• 用模板字符串包裹值：

  <h2>here is what you sent: {`${theData}`}</h2>
  

内容的提问来源于stack exchange，提问作者mattBurnett