reactjs - 如何在 react 和 typescript 中将粗体标签插入模板文字字符串

Question

我有一个按下按钮时出现的表单，表单的标题对于列表中的每个项目都是不同的，我可以删除这些项目。我希望表单标题中的项目名称为粗体，但我正在努力正确实现这一点

我的表格看起来像

render(): React.ReactNode {

 return (
  <FormGroup
    fieldId='example-form
    helperText={`do you want to delete <b>${this.props.item.name}</b>?`
    >
    </FormGroup>
   )
  }

这当前打印出 <b>标签。我试过分配 this.props.item.name将变量作为字符串并在其上使用 bold() 但它不起作用。任何意见，将不胜感激。

Answer 1

您不能在字符串中嵌入 html，这是 React 的一项安全功能，用于在显示用户提供的内容时防止跨站点脚本。

但是，您实际上拥有的是 JSX!

因此，将 helperText 类型更改为 React.ReactNode，现在您可以传入一个 fragment。像这样:

<FormGroup
  fieldId='example-form'
  helperText={
    <>
      do you want to delete <b>{this.props.item.name}</b>?
    </>
  }
/>