javascript - 组件获取重复内容而不是刷新

Question

我正在回顾 ReactJS，遵循 https://facebook.github.io/react/docs/tutorial.html 上的教程当我玩这个例子时，我遇到了一个奇怪的行为。问题是一个元素(注释)的内容没有被刷新。相反，它会复制新数据。

查看工作 fiddle http://jsfiddle.net/L0xy4jqa/2/

出了什么问题？

代码:

/* HTML */
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<div id="content"></div>

/* JS */
var DATA = [
        {author:"Mr. Raspa Pan", color:"darkblue", text: "- some content"},
        {author:"Mrs. Pasa Sa", color:"darkgreen", text: "- some *other* content"},
        {author:"Mrs. Rata Tan", color:"brown", text: "- __more__ content"},
        {author:"Mr. Aspa Spa", color:"deeppink", text: "- Code like:  `for (;true;) {lv(u)}`"}    
    ];

var DATA2 = [
        {"author":"Mrs. Raspa Pan Pan", "color":"blue", "text": ">- some *chaged* content"},
        {"author":"Mrs. Pasa Sa Sa", "color":"green", "text": ">- some *other* __changed__ content"},
        {"author":"Mr. Rata Tan Tan", "color":"red", "text": ">- __more__ **changed** content"},
        {"author":"Mr. Aspa Spa Spa", "color":"pink", "text": ">- Code like: `with (you) { lv(this); }`"}  
    ];

var Comment = React.createClass({
  render: function (){
    var markdown = marked(this.props.children.toString(), {sanitize: true});

    return(
      <div className="comment" style={{border: "1px solid orange", padding: "5px"}}>
        Hello, world! I am a comment from:
        <h2 className="commentAuthor" style={{color: this.props.color, border: "1px solid purple", margin: "0"}}>
          {this.props.author}
        </h2>
//This line below has the problem: it should be <div className="commentContent" ... in order to hold the <p> returned by marked
        <p className="commentContent" dangerouslySetInnerHTML={{__html: markdown}} />
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function(){
    var commentNodes = this.props.data.map(function (comment,i){ return(
        <Comment key={i} author={comment.author} color={comment.color}>{comment.text}</Comment>);
        }
      );
    return (
      <div className="commentList" style={{border: "1px dashed blue", padding: "5px"}}>
        Hello, world! I am a CommentList. And I have comments:
        {commentNodes}
      </div>
    );
  }
});

var CommentBox = React.createClass({
  getInitialState: function(){
    return {data: this.props.data};
  },
  componentDidMount: function () {
     var o = this;
    setTimeout(function(){
        o.setState({data: DATA2});
    },2000);      
  },
  render: function() {
    return (
      <div className="commentBox" style={{color: "grey", border: "1px solid red", padding: "5px"}}>
        Hello, world! I am a CommentBox and I have a list of comments.
        <CommentList data={this.state.data}/>
      </div>
    );
  }
});

React.render(
  <CommentBox data={DATA} url="comments.json"/>,
  document.getElementById('content')
);

Answer 1

问题是标记库返回

元素内的格式化字符串。这与 JSX

容器发生冲突。浏览器尝试修复分割它们的嵌套段落，导致 React 丢失对内容的引用。我正在编辑问题以指出问题所在。

所以，伙计们，请小心危险的SetInnerHTML 参数。