危险地SetInnerHTML 抛出意外错误

Question

尽管最近严重缺乏 Javascript 经验，但我一直在尝试学习 React，但我遇到了一些意想不到的障碍。 我正在重写我的个人网站（基本上是静态 HTML，后端有一些 PHP），我想做的一件事是从外部 JSON 文件加载我的简历的详细信息（下一步是从一个静态 JSON 文件，用于调用将返回数据的端点）。

在我的简历中，我列出了几项工作的成就列表，其中一些我想返回少量标记（在一种情况下是指向我是发明者的专利的链接，而在另一种情况下只是一个跨越将样式应用于单个句子以引起人们对一些无偿工作的注意）。 我知道我可以在 React 中使用危险的SetInnerHTML() 方法传入包含标记的字符串并渲染它......但我似乎无法让它工作。

这是有问题的组件：

import React, {Component} from 'react';


class WorkEntry extends Component {
    constructor(props) {
        super(props);
        var _this = this;
        this.usedSkillsTags = [];
        this.responsibilitiesTags = [];
        this.achievementsTags = [];

        this.props.technologiesUsed.forEach(function (item) {
            _this.usedSkillsTags.push(<li>{item}</li>)
        });
        this.props.responsibilities.forEach(function (item) {
            _this.responsibilitiesTags.push(<li>{item}</li>)
        });
        this.props.achievements.forEach(function (item) {
            if(item.indexOf("<") > -1 && item != null ) {
                _this.achievementsTags.push(<li dangerouslySetInnerHTML={ { _html : item.toString() } }/>)
            }
            else{
                _this.achievementsTags.push(<li>{item}</li>)
            }
        });
    }

    render() {
        return (
            <div>
                <div class="row">
                    <div class="well">
                        <div class="row">
                            <div class="col-sm-12">
                                <h3>{this.props.companyName} -
                                    <small> {this.props.jobTitle}</small>
                                </h3>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">{this.props.startDate} - {this.props.endDate}</div>
                        </div>

                        <div class="row">
                            <div class="col-sm-4">
                                <h4 class="text-center">Skills Used</h4>
                                <ul class="wrapped-list">
                                    {this.usedSkillsTags}
                                </ul>
                            </div>
                            <div class="col-sm-8">
                                <h4 class="text-center">Responsibilities</h4>
                                <ul>
                                    {this.responsibilitiesTags}
                                </ul>
                            </div>
                        </div>
                        { this.achievementsTags.length > 0 &&
                            <div class="row">
                                <div class="col-sm-12">
                                    <h4 class="text-center">Notable Projects and Achievements</h4>
                                    <ul>
                                        {this.achievementsTags}
                                    </ul>
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default WorkEntry;

这是导致问题的 Json：

{
    "companyName": "Eloquence Communications",
    "jobTitle": "Lead Developer",
    "startDate": "January 2013",
    "endDate": "February 2014",
    "technologiesUsed": [
      "Java",
      "SQL",
      "Idea",
      "Bamboo",
      "Nexus",
      "Maven",
      "Git",
      "JavaFX",
      "Python"
    ],
    "responsibilities": [
      "Designed overall architecture for hospital Nurse Call System",
      "Managed complex build process for multiple Java applications using Git, Maven, Nexus, and Bamboo",
      "Proposed idea which was eventually patented by employer",
      "Lead a small team of developers to convert an idea into a product"
    ],
    "achievements": [
      "After proposing a method of nursing staff tracking and authentication using NFC, was named as an inventor on <a href='http://patents.justia.com/patent/20140330575'>patent application #20140330575</a>"
    ]
  }

最后，这是我看到的错误：

我显然已经阅读了错误消息中的链接，但我看不出文档中的代码和我自己的代码之间有什么区别。 任何人都可以在这里提供一些专业知识吗？

Answer 1

dangerouslySetInnerHTML需要__html （注意两个下划线），而不是_html

将其更改为

dangerouslySetInnerHTML={ { __html : item.toString() } }