React中如何遍历对象动态生成带加粗属性值的段落元素？

你可以直接让处理函数返回 JSX 元素数组来实现加粗效果，这是最符合 React 设计逻辑的方案，也能规避安全风险，改造后的代码如下：

const getSearchCriteria = (criteria) => {
  const criteriaElements = []
  // 先过滤出值非空的属性
  const validKeys = Object.keys(criteria).filter(key => criteria[key] !== '')
  validKeys.forEach((key, index) => {
    criteriaElements.push(
      <span key={key}>
        {` ${key}: `}
        <b>{criteria[key]}</b>
        {/* 最后一项不加逗号 */}
        {index !== validKeys.length - 1 ? ',' : ''}
      </span>
    )
  })
  // 拼接开头固定文本返回
  return ['Download request for', ...criteriaElements]
}

// 渲染部分不需要额外处理，直接使用返回结果即可
return (
  <p>
    {getSearchCriteria(searchCriteria)}
  </p>
)

如果你确实需要直接渲染 HTML 字符串，可以使用 React 提供的 dangerouslySetInnerHTML 属性，但要注意：如果 searchCriteria 的值来自用户输入，该方案存在 XSS 注入风险，仅推荐在完全确认内容安全的场景下使用：

const getSearchCriteriaHtml = (criteria) => {
  let htmlStr = 'Download request for'
  const validKeys = Object.keys(criteria).filter(key => criteria[key] !== '')
  validKeys.forEach((key, index) => {
    htmlStr += ` ${key}: <b>${criteria[key]}</b>${index !== validKeys.length - 1 ? ',' : ''}`
  })
  return { __html: htmlStr }
}

return (
  <p dangerouslySetInnerHTML={getSearchCriteriaHtml(searchCriteria)} />
)

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