Javascript Reactjs:在状态更改时重新渲染iFrame

我创建了一个示例，每个列表项中都有list和iframe

/**@jsx React.DOM*/
var TodoList=React.createClass({
createItem：函数（项）{
返回(
{item.text}


);
},
render:function（）{
返回
{this.props.items.map（this.createItem）}
；
}
});
var TodoApp=React.createClass({
getInitialState:函数（）{
返回{个项目：[
{text:'hello'，name:'name1'，yid:'//www.youtube.com/embed/y3iZACDBapU？autoplay=1'}，
{text:'hello2'，name:'name2'，yid:'//www.youtube.com/embed/dA3nu8ht0jU？autoplay=1'}
]，文本：'}；
},
handleDelete：函数（itemToDelete，e）{
控制台信息（itemToDelete）；
var newItems=551;.reject（this.state.items，函数（item）{
return item.name==itemToDelete.name
});
this.setState（{items:newItems}）；
},
handleChange:函数（e）{
this.setState（{text:e.target.value}）；
},
handleSubmit:函数（e）{
e、 预防默认值（）；
var nextItems=this.state.items.concat（[this.state.text]）；
var nextText=''；
this.setState（{items:nextItems，text:nextText}）；
},
render:function（）{
返回(
待办事项
{'Add#'+（this.state.items.length+1）}
);
}
});
React.renderComponent（，document.body）；

若我从状态中删除记录，其他记录的iFrame将重新呈现。 若您试图删除示例中的第一条记录，则第二个视频将从头开始

---

如何告诉Reactjs不要重新呈现状态不变的记录？

尝试在Todolist createitem函数中添加键属性

var TodoList = React.createClass({
  createItem: function(item) {
      return (
          <li key={item.yid}>
              {item.text} 
              <a href="#" onClick={this.props.handleDelete.bind(this, item)}>x</a><br />
              <iframe src={item.yid} width="560" height="315" frameborder="0" allowfullscreen></iframe>
           </li>        
      );
  },

  render: function() {
    return <ul>{this.props.items.map(this.createItem)}</ul>;
  }
});

var TodoList=React.createClass({
createItem：函数（项）{
返回(

{item.text}



);
},
render:function（）{
返回
{this.props.items.map（this.createItem）}
；
}
});

var TodoList = React.createClass({
  createItem: function(item) {
      return (
          <li key={item.yid}>
              {item.text} 
              <a href="#" onClick={this.props.handleDelete.bind(this, item)}>x</a><br />
              <iframe src={item.yid} width="560" height="315" frameborder="0" allowfullscreen></iframe>
           </li>        
      );
  },

  render: function() {
    return <ul>{this.props.items.map(this.createItem)}</ul>;
  }
});