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

【问题标题】：How to insert Bold tags into a template literal string in react and typescrip如何在反应和打字稿中将粗体标签插入模板文字字符串
【发布时间】：2020-05-12 20:06:19
【问题描述】：

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

我的表单看起来像

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

【问题讨论】：

如果您包含 FormGroup 组件的来源以便更好地理解 helperText 道具，那会很重要
FormGroup 是一个 patternfly4 组件，只是在另一个组件中激活按钮时返回这里

标签： reactjs typescript patternfly

【解决方案1】：

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

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

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

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

【讨论】：

你建议在哪里创建它，在渲染内部和返回之前，它在那里完全中断
作为道具。我已更新我的答案以包含该部分
您的答案有效，我没有意识到我可以像这样传入 > 标签，并认为我只能在 {} 之外执行它们。我需要更多地了解它们。

【解决方案2】：

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

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

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

【讨论】：

当我尝试这个方法时，我在尝试编译时遇到错误，抱怨项目未定义
@Aindriu 好吧，由你来传递 item 属性。