React-Native 使用狀態來渲染相似子組件小問題

今天要實現一個和tabNavigator 類似功能的選擇框問題

下面是碰到一段代碼：

{this.state.selectedTab === selectTabData[0] ?
   <ScrollView>
       <ArticleListComp
            contents={this.props.chosen}
            loadData={(value) => {
                  this.props.loadChosen(value); 
             }}      
            navigator={this.props.navigator}    
        />  
    </ScrollView> 
   : 
    <ScrollView>  
        <ArticleListComp      
            contents={this.props.realTime}
            loadData={(value) => { 
                 this.props.loadRealTime(value); 
             }} 
             navigator={this.props.navigator}
          />
    </ScrollView>
  }

然后發現一個問題，就是兩個相似的控件每次只會渲染第一個，第二個根本不會去渲染
問題就是兩個控件，React渲染的時候偷懶了，以為是一個，就沒有渲染第二個，所以每個控件加上相應的key即可

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容