gpt4 book ai didi

javascript - React - 如何渲染变量中包含的 HTML?

转载 作者:行者123 更新时间:2023-12-02 21:38:14 26 4
gpt4 key购买 nike

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

我想要获得的是一个返回此输出的组件:

<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 输出?

最佳答案

您可以拆分文本,并将拆分文本与 anchor 的 react 组件一起输出:

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>

关于javascript - React - 如何渲染变量中包含的 HTML?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60437844/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com