reactjs - 如何在反应和打字稿中将粗体标签插入模板文字字符串

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变量作为字符串分配并在其上使用粗体（），但它不起作用。任何意见，将不胜感激。

Answer 1

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

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

因此，将helperText类型更改为React.ReactNode，现在您可以像这样传递一个片段：

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

Answer 2

不允许在模板文字中传递 HTML 标记。它会将您的 HTML 标记呈现为字符串。为了解决这个问题，你可以为你的帮助文本创建一个 JSX 变量，并将它传递给你的helperTextprop in FormGroupelement。

render(): React.ReactNode {
 const helperText = <>do you want to delete <b>{this.props.item.name}</b></>;

 return (
   <FormGroup
    fieldId='example-form'
    helperText={helperText}
   >
   </FormGroup>
  )
}