React中如何在JS对象内为指定字符串添加加粗样式？

你尝试在模板字符串中直接插入React <b> 元素，这会导致React元素被强制转换为字符串（显示为[object Object]）——因为模板字符串只能处理原始字符串类型，无法识别并渲染React节点，所以加粗样式完全不生效。

方案1：修改ListRadioButtons组件支持React节点（推荐） #

如果ListRadioButtons是项目内部维护的组件，直接调整它的逻辑，让选项内容支持React元素而非纯字符串：

1. 重新定义选项数组，拆分表单提交值和显示标签：

const paymentOptionsRadio = [
  {
    key: 'fullamount',
    // 用React片段包裹带样式的标签内容
    label: (
      <>
        Full amount - <b>{getCurrency(bookingData?.currencyIsoCode)}</b> <b>{bookingData?.expectedPayments[0].amount}</b>
      </>
    ),
    value: 'fullamount' // 保留原始字段作为表单提交的value值
  },
];

2. 更新ListRadioButtons组件的渲染逻辑：

// 旧写法（仅支持字符串）
{values.map(item => (
  <label key={item.key}>
    <input type="radio" name={name} value={item.value} />
    {item.value}
  </label>
))}

// 新写法（支持React元素渲染）
{values.map(item => (
  <label key={item.key}>
    <input type="radio" name={name} value={item.value} />
    {item.label}
  </label>
))}

方案2：使用dangerouslySetInnerHTML（仅当无法修改组件时使用） #

如果ListRadioButtons是第三方组件，只能接收字符串类型的选项内容，可以用HTML字符串配合dangerouslySetInnerHTML解析渲染（注意：若内容包含用户输入，存在XSS风险，谨慎使用）：

1. 生成带HTML加粗标签的字符串：

const paymentOptionsRadio = [
  {
    key: 'fullamount',
    value: `Full amount - <b>${getCurrency(bookingData?.currencyIsoCode)}</b> <b>${bookingData?.expectedPayments[0].amount}</b>`,
  },
];

2. 在ListRadioButtons组件内部渲染时解析HTML：

{values.map(item => (
  <label key={item.key}>
    <input type="radio" name={name} value={item.key} />
    <span dangerouslySetInnerHTML={{ __html: item.value }} />
  </label>
))}

这类问题被标记降级，通常是因为属于React基础概念误解——混淆了字符串和React节点的渲染逻辑差异，并非复杂问题，修正核心逻辑后即可解决。

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