javascript - 在 React 组件中使用的字符串变量中插入 html

Question

我有一个正在为我的投资组合网站构建的 React 应用程序。目前我有用 JSX 编写的应用程序，所以我可以添加如下内容:

class Project extends React.Component {
render() {
    return (
        <div className={this.props.project.class}>
            <h1>{this.props.project.header}</h1>
            <div>
                <div className='description'>
                    <p>{this.props.project.description}</p>
                    <p>The Tech Stack</p>
                    <ul>
                        {
                        this.props.project.items.map(function(listValue){
                            return <li>{listValue}</li>;
                        })}
                    </ul>
                </div>
                <div className='image'>

                </div>
            </div>

        </div>
    );
}

到我的组件。我目前正在另一个名为 Text.js 的文件中管理我的长文本字符串:

export let exampleText = "Graded is a application developed by <a href='google.com'> Link here. </a> and myself for our second year user interfaces course.";

并在我的 jsx 文件中访问它:

var gradedItems = {
    class: "gradedSection content",
    header: "Graded",
    description: Text.exampleText,
    items : ["Java", "Android"]
}

然后它会显示在 <p> 中上面组件中的标签。然而，正如我提到的，链接实际上并没有呈现，而且 html 标签也没有呈现。所以它看起来像一些文本，然后是网站中的一个标签。

我应该如何在这个字符串中添加这些 html 标签，以便当组件呈现它时，里面的 html 元素被呈现出来？

在这种情况下，是否有更好的方法来实现我想要实现的目标？

一如既往的感谢!

Answer 1

你只需要使用 dangerouslySetInnerHTML这会有所帮助。

示例用法:

let exampleText = "Graded is a application developed by <a href='google.com'> Link here. </a> and myself for our second year user interfaces course.";
function Component() {
  return <div dangerouslySetInnerHTML={{__html: exampleText }} />;
}