小编sky*_*ing的帖子

如何获得React密钥属性的清晰概念?

我最近一直在使用ReactJS但是当谈到"关键"属性时,我真的不知道它是如何工作的.

在父组件中说我做渲染如下:

render: function() {

  // dataList = [{id: 1}, {id: 2}, {id: 3}];  => initial state
  // dataList = [{id: 2}, {id: 3}, {id: 4}];  => second dataList state

  var someComponentList = [];

  this.state.dataList.forEach(function(data) {
    someComponentList.push(
      <SomeComponent key={data.id} id={data.id}/>
      )
  })

  return (
    <div>
      {someComponentList}
    </div>
    )
}
Run Code Online (Sandbox Code Playgroud)

在SomeComponent中:

var SomeComponent = React.createClass({
    render : function({
        // Render work here
    }),
    componentWillReceiveProps: function(nextProps) {
        console.log(this.props.id == nextProps.id);
    }
})
Run Code Online (Sandbox Code Playgroud)

所以componentWillReceiveProps我预计3 false控制台的结果(这是我做,如果我没有给key属性<SomeComponent>)之后setState() …

javascript reactjs

2
推荐指数
1
解决办法
473
查看次数

标签 统计

javascript ×1

reactjs ×1