javascript - 如何在 React 中为子字符串添加粗体样式

Question

我有一个这样的字符串列表：

[
    {
       text: "This is a sentence."
       boldSubstrings: [
           { offset: 5, length: 2 }
       ]
    }
]

我想呈现这样的行列表

 lines.map(elem => <p>{elem.text}</p>);

我需要以某种方式将粗体样式应用于粗体子字符串中指示的单词（在本例中为“这是一个句子。”），知道怎么做吗？

标签： javascriptcssreactjs

Answer 1

这将起作用：

const stringList = [
  {
     text: "This is a sentence.",
     boldSubstrings: [
         { offset: 5, length: 2 },
         { offset: 8, length: 1 }
     ]
  }
];

stringList.map(({text, boldSubstrings}) => {
  let prevStart = 0;
  const splittedStrings = [];
  for (let subStrings of boldSubstrings) {
    splittedStrings.push(text.substr(prevStart, subStrings.offset - prevStart));
    splittedStrings.push(<b>{text.substr(subStrings.offset, subStrings.length)}</b>);
    prevStart = subStrings.offset + subStrings.length;
  }
  splittedStrings.push(text.substr(prevStart));
  return <p>{splittedStrings}</p>;
});

产生：

<p>This <b>is</b> <b>a</b> sentence.</p>