爲ReactJS鍵生成順序ID

React要求您在數組中的元素上具有唯一的key屬性。 React docs建議在您的數據中使用id。如果你沒有id，那麼你可以使用數組索引作爲「最後的手段」，但要注意的是，使用索引時可能會導致性能問題，當項目可以重新排序。在構建來自多個源數組的元素數組以及對.map()的多個調用時，我也遇到了一些煩人的問題，每個調用都有不同的轉換，在這種情況下，數組索引不會是唯一的。爲ReactJS鍵生成順序ID

我已經開始拋出以下樣板到我的部件：

constructor(props) { 
    super(props); 
    this.getId = this.getId.bind(this); 
    this.id = 0; 
} 

getId() { 
    return this.id++; 
}

可以使用像這樣：

render() { 
    const items = this.props.greetings.map(text => ({ 
     <li key={this.getId()}>{text}</li> 
    })); 

    return (
     <ul> 
      {items} 
     </ul> 
    ); 
}

這是簡單，快速，並且沒有問題使用數組索引有，但我不知道這種方法是否有任何問題，或者我忽略了更好的替代方案。這是不好的做法嗎？有沒有其他簡單的方法來生成沒有數組索引問題的key？

來源

2017-10-21 mgalgs

'key' prop不需要是一個整數。您可以將任何字符串傳遞給鍵。所以如果你的'text'道具在其他同級組件中是唯一的，你可以將它作爲'key'道具傳遞。 – bennygenel

@bennygenel這是一個人爲的例子。你可以假設'text'不能保證是唯一的。 – mgalgs

這是對Reconciliation的文檔必須在按鍵

在實踐中說，找到一個密鑰通常並不難。您要顯示的元素可能已經有一個唯一的ID，所以密鑰可以來自您的數據。如果情況並非如此，您可以將新的ID屬性添加到您的模型或散列某些內容部分以生成密鑰。關鍵只在兄弟姐妹中是唯一的，而不是全球唯一的。作爲最後的手段，您可以將數組的索引作爲關鍵字傳遞給數組。如果項目從未重新排序，這可以很好地工作，但重新排序會很慢。

所以我認爲你是按照建議的方法。

來源

2017-10-22 04:52:35 palsrealm

看來我的方法不會有緩慢重新排序的問題，對吧？不知道爲什麼文檔不推薦這樣的東西......我想有一個缺點是所有的樣板，當你不關心性能，很難證明...... – mgalgs

不，你可以安全地從緩慢的重新排序你明確地創建id。文檔確實說你應該使用數組索引作爲最後的手段。看看我遇到的其中一個問題，它顯示了可能發生的事情。 https://stackoverflow.com/questions/46477711/react-error-when-removing-input-component – palsrealm

另外，爲了解決樣板問題，你可以創建一個HOC，將一個id道具添加到你可能想要的任何組件在數組中使用。只是一個想法。 – palsrealm

爲ReactJS鍵生成順序ID

回答

相關問題