如何在对象数组项字符串中加粗文本？答案

【问题标题】：How can I bold text within an object array items string?如何在对象数组项字符串中加粗文本？
【发布时间】：2021-10-09 15:48:44
【问题描述】：

我使用下面的数据在 React 中作为 props 传递。一切正常，但我只需要在文本属性中加粗“目标受众”一词。有没有办法做到这一点？

const SlideData = [
{
    index: 1,
    title: "Target Audience",
    text: [
      "The target audience for this course is anyone who is assigned roles as a HR Employee Maintainer...",
    ],
    image: {
      src: targetAudience,
      width: imageSize,
    },
},
    index: 2,
    title: "Reporting ",
    text: [
      "Reporting Manager is designated to...",
    ],
    image: {
      src: reporting,
      width: imageSize,
    },
},
]

export default SlideData

添加渲染组件

const TextSlide = ({ title, text = [], list, image }) => {
  return (
    <>
      <div className="slide">
        <div className="standard-grid">
          <span className="slide-title title">{title}</span>
          <div className="content">
            {text.map((t, i) => (
              <p key={i} className="text">
                {t}
              </p>
            ))}
          </div>
          {image ? <img className="picture" src={image.src} style={{ maxWidth: image.width }} alt="image" /> : null}
        </div>
      </div>
    </>
  );
};

export default TextSlide;
``

【问题讨论】：

如何渲染文本？
粗体字与演示相关，而您的 SlideData 与数据相关；你应该尽量避免混合这两层。无论如何，您可以处理此问题的一种方法是使用类似降价的方法并将"The target audience for this course is ..." 更改为"The #target audience# for this course is ...，然后在渲染期间将# 替换为相关标签。
如果有帮助，我添加了渲染位置
好吧，我绝对不希望将它们混合在一起 @secan ，我考虑过创建一个包含粗体字符串“目标受众”的 const，然后将其导入 text: property via string literal？但那样我就会有很多……

标签： javascript arrays reactjs string object

【解决方案1】：

您可以将文本更改为带有__html 键的对象，并使用bold 标签通过dangerouslySetInnerHTML 来呈现它：

const SlideData = [
  {
    index: 1,
    title: "Target Audience",
    text: [
      {
        __html:
          "The <b>target audience<b> for this course is anyone who is assigned roles as a HR Employee Maintainer...",
      },
    ],
    image: {
      src: targetAudience,
      width: imageSize,
    },
  },
];

const TextSlide = ({ title, text = [], list, image }) => {
  return (
    <>
      <div className="slide">
        <div className="standard-grid">
          <span className="slide-title title">{title}</span>
          <div className="content">
            {text.map((t, i) => (
              <p key={i} className="text" dangerouslySetInnerHTML={t} />
            ))}
          </div>
          {image ? (
            <img
              className="picture"
              src={image.src}
              style={{ maxWidth: image.width }}
              alt="image"
            />
          ) : null}
        </div>
      </div>
    </>
  );
};

这是一个小的codepen 用于演示。

【讨论】：

× 错误：props.dangerouslySetInnerHTML 必须采用 {__html: ...} 的形式。请访问reactjs.org/link/dangerously-set-inner-html 了解更多信息。我收到此错误？
对不起，我的错，你不需要t.__html。只需通过t。它会自动读取密钥并应用它。我会更新我的答案。
好的，text 中的每个元素是否都有一个键名__html？
它必须看起来像这样：<p key={i} className="text" dangerouslySetInnerHTML={t} />。应该发生的是 dangerouslySetInnerHTML 属性消耗了 __html 键。如果您像在示例中那样传递它，它将查找密钥，但找不到它。
所以我只注释了一个对象并且它有效！但是如果我添加另一个它会给我错误，所以我复制了同一个对象并且它有效所以我猜我只是在写我的数据错误的。我可以发誓这是准确的，但我的眼睛一定欺骗了我。谢谢！

【解决方案2】：

您可以按目标受众拆分文本，并将中间的块映射到文本节点，并为每个元素附加一个节点：

      "The target audience for this course is anyone who is assigned roles as a HR Employee Maintainer...",
       .split("target audience")
       .map((text, index) => <>{index !== 0 && <b>target audience</b>} {text}</>)

更复杂的方法是将html标签注入文本，并使用dangerouslySetInnerHTML：

 const formatted = text.replace(/(target audience)/g, it => `<b>${it}</b>`);

 return <div dangerouslySetInnerHTML={formatted} />;

【讨论】：

我开始明白了，如果有帮助，我会编辑添加我的渲染方法。看完之后你会推荐什么？

【解决方案3】：

试试这个：

text: ["The ", <strong>target audience</strong>, " for this course is anyone who is assigned roles as a HR Employee Maintainer..."]

React 会将其呈现为应用了 HTML 标记的字符串。

【讨论】：

很确定只会将标签呈现为字符串？
不，它呈现为一个应用了标签的字符串。我相信 React 会在后台处理它。似乎比所有 JavaScript 更简单的解决方案
我错了吗？我在 React 中对其进行了测试，它似乎可以工作..
不幸的是我无法让它在我的工作:(