javascript - 如何在reactjs中用 anchor 标记替换字符串中的文本

Question

我有一个像这样的字符串:var str = '我喜欢 stackoverflow';

我想用 anchor 标记替换 stackoverflow 文本。

我尝试使用替换，但它不起作用。有人可以建议一下吗？

Answer 1

考虑首先从字符串中删除单词“stackoverflow”，然后使用 anchor 标记渲染它:

const greeting = "I love stackoverflow";
const finalGreeting = greeting.replace('stackoverflow', '');

return <>
  {finalGreeting}
  <a href="https://stackoverflow.com">stackoverflow</a>
</>

<小时/>

替代解决方案 dangerouslySetInnerHTML :

const HelloStackOverflow = () => {
  const greeting = "stackoverflow is my love";

  const finalGreeting = greeting.replace('stackoverflow', 
'<a href="https://stackoverflow.com">stackoverflow</a>');

  return <span dangerouslySetInnerHTML={{ __html: finalGreeting }}/>
}

ReactDOM.render(
  <HelloStackOverflow />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />