危險地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() } }