处理更改列数的子组件更新

Question

我目前正在经历一个关于Reactjs的知识湖。我有一个由列组成的组件。列数是可变的（用户可以改变它）。在这一栏中，有一些项目包含YouTube嵌入视频。

当我更改列数时，父元素正在刷新并且子组件正在更新：视频播放器被刷新（因此视频暂停并且正在搜索0）。
我想有一个系统，当我改变列数时能够保持我的孩子不更新。
我想，当我改变我的列数时，React会重用一些可用的childs组件，并通过其他子组件改变他们的道具。因为有时视频不会中断。

子组件

export default class Article extends Component { 

    static propTypes = { 
     visible: React.PropTypes.bool.isRequired, 
     title: React.PropTypes.string.isRequired, 
     link: React.PropTypes.string.isRequired, 
     userId: React.PropTypes.number.isRequired, 
     contentId: React.PropTypes.number.isRequired, 
     typeId: React.PropTypes.number.isRequired, 
     typeName: React.PropTypes.string.isRequired, 
     date: React.PropTypes.number.isRequired, 
     username: React.PropTypes.string.isRequired, 
     description: React.PropTypes.string, 
     imageUrl: React.PropTypes.string 
    }; 

    shouldComponentUpdate(nextProps) { 
     return nextProps.link !== this.props.link; 
    } 

    render() { ... } 

} 

父组件

class Home extends UserComponent { 

    static propTypes = { 
    mode: React.PropTypes.number.isRequired, 
    columnCount: React.PropTypes.number.isRequired, 
    userList: React.PropTypes.array.isRequired, 
    }; 

    state = { 
    contents: [], 
    columnCount: 0, 
    userList: [], 
    } 

    ... 

    renderArticles = (columnCount, columnNumber) => { 
    if (this.state.contents.length > 0) 
     return this.state.contents.map((content, key) => { 
     if ((key + columnNumber) % columnCount !== 0) return null; 
     let username = 'unknown'; 
     let typeName = 'unknown'; 

     this.state.userList.forEach((user) => { 
      if (user.userId === content.userId) username = user.username; 
     }) 

     const types = Type.getTypes(); 
     if (types) { 
      types.forEach((type) => { 
      if (content.typeId === type.id) typeName = type.name; 
      }) 
     } 
     return (
      <Article 
      key={content.id} 
      visible={true} 
      title={content.title} 
      link={content.link} 
      userId={content.userId} 
      typeId={content.typeId} 
      contentId={content.id} 
      date={content.date} 
      description={content.description} 
      imageUrl={content.imageUrl} 
      username={username} 
      typeName={typeName} 
      /> 
     ); 
     }); 
    else 
     return null; 
    } 

    render() { 
    const { columnCount } = this.props.columnCount === 0 ? this.state : this.props; 
    const containers = []; 
    var i = 0; 
    do { 
     containers.push(
     <div key={i} className={styles.containers}> 
      {this.renderArticles(columnCount, i)} 
     </div> 
    ); 
     i++; 
    } while (i < columnCount); 

    return (
     <div className={styles.container}> 
     {containers} 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    columnCount: state.articleColumnFilter.columnCount 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators(articleColumnActions, dispatch); 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Home); 

Answer 1

看来，关键= {} content.id是不断变化的，你以前作出的同一列。密钥在父代中必须是唯一的，并且不应该针对之前提供的相同商品进行更改。

https://facebook.github.io/react/docs/lists-and-keys.html#keys https://facebook.github.io/react/docs/reconciliation.html

renderArticles =（信息columnCount，得到columnnumber）=> {

return (
     <Article 
     key={content.id} 
     ... 
     contentId={content.id} 
     ... 
     /> 
    ); 
    }); 
else 
    return null; 

}