如何在MUI的Checkbox标签中拼接展示对象的两个属性值

方法1：纯文本拼接（最简单实现） #

直接修改FormControlLabel的label属性，用模板字符串拼接两个字段即可：

label={`${item.title} (${item.costs})`}

如果要适配costs字段为空的场景，避免生成空括号，可以加一层判断：

label={`${item.title}${item.costs ? ` (${item.costs})` : ''}`}

方法2：自定义样式标签（如果需要给费用部分加特殊样式） #

MUI的label属性支持传入React节点，你可以自由控制两个字段的展示样式，比如把费用部分设为灰色小字：

label={
  <>
    {item.title}
    <span style={{ marginLeft: '4px', color: '#888', fontSize: '0.875rem' }}>
      ({item.costs})
    </span>
  </>
}

完整修改后的代码示例 #

<FormGroup>
  {data.map((item, index) => {
    return (
      <FormControlLabel
        key={index}
        control={<Checkbox />}
        // 可根据需求替换为上述任意一种拼接逻辑
        label={`${item.title} (${item.costs})`}
        name={item.title}
        value={item.title}
        onChange={() => handleChange(index)}
        disabled={disabledItems[index]}
        checked={checkedItems[index]}
        color="default"
      />
    )
  })}
</FormGroup>

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