変更する列数の子コンポーネントの更新を処理します

Question

現在Reactjについての知識の湖があります。私は、列で構成されたコンポーネントを持っています。列の数は可変です（ユーザーはそれを変更できます）。この列には、YouTubeの埋め込みビデオを含むいくつかの項目があります。

親要素がリフレッシュされ、子コンポーネントが更新されているときに、ビデオプレーヤーが更新されます（ビデオが一時停止され、0にシークされる）。
私は、列数を変更したときに私の子供を更新しないでおくことができるシステムを持っていたいと思います。
私は、列カウントを変更しているとき、Reactはいくつかの子コンポーネントを再利用し、他の子コンポーネントによってその小道具を変更するとします。ビデオが壊れないことがあるためです。

子コンポーネント

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; 

}