javascript - 如何将 json 字符串中的某些文本设为粗体？

Question

我想在 react 中连接两个字符串，使第一个字符串显示为粗体，第二个字符串则不显示。我想要在 JSON 文件中加粗字符串，并且想要连接来自后端 API 调用的字符串。这是我的设置:

这是一个 JSON 文件:

  { stuff: {
    stuffIWantBolded: "bold text"
    }
  }

我的前端看起来像这样:

  render() {
      // props for this component in which I'm rendering SomeComponent (see below)
      const { data } = this.props
      const { theStringFromBackend } = data
      // a method to get the string that is working for me
      const stuff = this.getTheStringFromTheJSON();
      const textIWantToDisplay = `${stuff.stuffIWantBolded} ${theStringFromBackend}`;
         return (
          <SomeComponent someProp={textIWantToDisplay} />
        );
     };

这两个字符串成功连接起来。我尝试过使用 .bold()在 stuff.stuffIWantBolded 末尾，但这显然不起作用，因为字符串呈现为 <b>bold text</b> the string from backend (假设这就是后端的字符串所说的内容)，显式写出 HTML 标签，而不是呈现实际的粗体文本。我有什么遗漏的吗？我不认为可以在 JSON 中将字符串加粗...也许我需要使用正则表达式？任何帮助将不胜感激。

Answer 1

这个怎么样:

return (
  <>
    <span style={{fontWeight: "bold"}}>{stuff.stuffIWantBolded}</span>
    <span>{theStringFromBackend}</span>
  </>
);

<>和</>有效地允许您从一个渲染函数返回多个项目。