Javascript ReactJS在以相反顺序插入元素时重新初始化iframe

我使用React来填充基于官方的注释的逆序呈现。给你

你会注意到我嵌入了一个Youtube视频作为现有的评论。按播放视频。现在，输入注释。您会注意到注释被插入到视频上方，并且视频被重新初始化

如果是，添加新评论时，视频将继续播放

---

为什么在按相反的时间顺序添加注释时，视频会重新初始化？据我所知，React应该在内容发生更改时智能地删除和插入新节点

每个React组件实例都有一个“key”属性，它是用于识别组件的唯一标识符。这就是React执行DOM扩散的方式（即“自上次渲染以来，此特定注释是否发生了更改？”）

因为您提供的代码没有在实例上定义键，所以React会根据注释的索引为每个注释分配一个键。当按相反的时间顺序插入注释时，视频注释的索引（以及键）从0变为1，DOM发生变化，从而重新初始化iframe

我在代码中添加了一个变量

num\u comments

，它通过在每次添加新注释时分配一个新注释id来解决关键问题

JSBin：

完整性代码如下：

var num_comments = 0;
var Comment = React.createClass({
  render: function() {
    var rawMarkup = this.props.children.toString();
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
      </div>
    );
  }
});

var CommentBox = React.createClass({
  handleCommentSubmit: function(comment) {
    var comments = this.state.data;
    comments.unshift(comment);
    num_comments++;
    this.setState({comment_id: num_comments, data: comments});
  },
  getInitialState: function() {
    return {data: [{
        comment_id: 0,
        author: 'Eric',
        text: '<iframe width="560" height="315" src="https://www.youtube.com/embed/NAm1JMDZEvI" frameborder="0" allowfullscreen></iframe>'
    }]};
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function(comment, index) {
      return (
        <Comment author={comment.author} key={comment.comment_id}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var author = React.findDOMNode(this.refs.author).value.trim();
    var text = React.findDOMNode(this.refs.text).value.trim();
    if (!text || !author) {
      return;
    }
    this.props.onCommentSubmit({author: author, text: text});
    React.findDOMNode(this.refs.author).value = '';
    React.findDOMNode(this.refs.text).value = '';
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

React.render(
  <CommentBox />,
  document.getElementById('content')
);

var num_comments=0；
var Comment=React.createClass({
render:function（）{
var rawMarkup=this.props.children.toString（）；
返回(
{this.props.author}
);
}
});
var CommentBox=React.createClass({
handleCommentSubmit:函数（注释）{
var注释=this.state.data；
注释。取消移位（注释）；
num_comments++；
this.setState（{comment\u id:num\u comments，data:comments}）；
},
getInitialState:函数（）{
返回{数据：[{
注释id:0，
作者：'埃里克'，
文本：“”
}]};
},
render:function（）{
返回(
评论
);
}
});
var CommentList=React.createClass({
render:function（）{
var commentNodes=this.props.data.map（函数（注释，索引）{
返回(
{comment.text}
);
});
返回(
{commentNodes}
);
}
});
var CommentForm=React.createClass({
handleSubmit:函数（e）{
e、 预防默认值（）；
var author=React.findDOMNode（this.refs.author）.value.trim（）；
var text=React.findDOMNode（this.refs.text）.value.trim（）；
如果（！text | |！author）{
返回；
}
this.props.onCommentSubmit（{作者：作者，文本：文本}）；
React.findDOMNode（this.refs.author）.value=''；
React.findDOMNode（this.refs.text）.value=''；
},
render:function（）{
返回(
);
}
});
反应(
,
document.getElementById（'content'）
);

很高兴我能帮忙！别忘了接受答案。