时间戳

首页 > 解决方案 > React - 如何将包含在变量中的 HTML 呈现出来？

javascript - React - 如何将包含在变量中的 HTML 呈现出来？

问题描述

我正在尝试创建一个动态链接组件，该组件使用 html 锚点转换字符串中的字符串。

我想要获得的是返回此输出的组件：

<p>Do you want <a href="http://google.com">to search</a>?</p>

我将此对象传递给组件

let phrase = {
  text :  'Do you want to search?'
  linktext : 'to search',
  linkurl  : 'http://google.com'
}

这是我尝试过但不起作用的组件，并且 html 呈现为文本

function InfoLink(props) {
  const q = props.phrase;
  const link = "<a href={q.linkurl} >{q.linktext}</a>";
  const text = q.text.replace(q.linktext, link);
  return (
    <p>{text}</p>
  );
}

有没有办法通过使用替换从组件中获得 html 输出？

标签： javascriptreactjs

解决方案

您可以拆分文本，并将拆分后的文本与锚的反应组件一起输出：

let phrase = {
  text :  'Do you want to search?',
  linktext : 'to search',
  linkurl  : 'http://google.com'
}

function InfoLink(props) {
  const q = props.phrase;
  const link = <a href={q.linkurl}>{q.linktext}</a>;
  const [part1, part2] = q.text.split(q.linktext);
  return (
    <p>{part1}{link}{part2}</p>
  );
}

ReactDOM.render(<InfoLink phrase={phrase}/>, 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"></div>

推荐阅读