危险地SetInnerHTML 抛出意外错误

Question

I've been trying to learn React in spite of a major lack of Javascript experience recently, and I've hit a bit of an unexpected snag. I am rewriting my personal website (which is basically static HTML with some PHP on the backend), and one of the things I want to do is load the details of my CV from an external JSON file (with the next step being to move from a static JSON file to a call to an endpoint that will return the data).

In my CV, I have a list of achievements for several of the jobs, and in a few of these I want to return a small amount of markup (in one case a link to a patent I was the inventor on and in another just a span applying styling to a single sentence to call attention to some pro-bono work). I understand that I can use the dangerouslySetInnerHTML() method in React to pass in the String containing the markup and have it rendered... bu I can't seem to get it to work.

Here is the component in question:

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;

And here is the Json that is causing the issue:

{
    "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>"
    ]
  }

Finally, here is the error I see:

I've obviously read the link in the error message, but I can see no difference between the code in the documentation and my own. Can anyone lend some expertise here?

Answer 1

dangerouslySetInnerHTML needs __html (note two underscores) and not _html

Change it to

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