ReactJS循环渲染时如何在JSX的label标签内为指定项添加上标#

可以直接在JSX中完成该需求，你之前的写法存在两个问题：

• 不能直接用单个字符串和数组做相等判断，each.service_name == ['Booklet', 'Logo', 'Newspaper'] 逻辑永远不成立
• 直接写<sup>#</sup>字符串会被React转义为普通文本，不会渲染为上标DOM节点

正确实现代码 #

if(props.data.length > 0){
  // 定义需要添加上标的服务名集合，后续维护只需修改该集合
  const markedServices = new Set(['Booklet', 'Logo', 'Newspaper']);
  return props.data.map((each,i) => 
    <Col xs={12} md={3} key={i}>
      <Form.Group>
        <Form.Check 
          type="checkbox" 
          label={
            <>
              {each.service_name}
              {markedServices.has(each.service_name) && <sup>#</sup>}
            </>
          }
          id={`service_${i}`} 
          {...props.register(`selectedService.${i}.value`) }
          value={each.id}
        />
        {/* <CBDetail isChecked={} /> */}
      </Form.Group>
    </Col>
  )
}

核心逻辑说明 #

1. 用Set存储目标服务名，通过has方法做匹配判断，逻辑更准确，增删匹配项也更方便
2. React-Bootstrap的Form.Check的label属性支持传入JSX节点，这里用React Fragment包裹服务名和条件渲染的上标元素，会直接渲染为符合预期的DOM结构
3. 用&&短路语法替代冗余的三元运算符，不需要重复书写服务名变量

兼容备选方案 #

如果你使用的组件版本不支持给label属性传JSX，可以自行拆分label渲染逻辑，兼容性更强：

if(props.data.length > 0){
  const markedServices = new Set(['Booklet', 'Logo', 'Newspaper']);
  return props.data.map((each,i) => 
    <Col xs={12} md={3} key={i}>
      <Form.Group>
        <Form.Check 
          type="checkbox" 
          id={`service_${i}`} 
          {...props.register(`selectedService.${i}.value`) }
          value={each.id}
        />
        <label htmlFor={`service_${i}`}>
          {each.service_name}
          {markedServices.has(each.service_name) && <sup>#</sup>}
        </label>
        {/* <CBDetail isChecked={} /> */}
      </Form.Group>
    </Col>
  )
}

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