通過鍵更新React組件

Question

我有一個React應用程序，它具有打開文件的選項卡式界面。打開的文件陣列看起來是這樣的：

[ 
    { name: 'file1', path: '/path/to/file1', fileContents: '...' }, 
    { name: 'file2', path: '/path/to/file2', fileContents: '...' }, 
    { ... } 
] 

哪些是渲染成<div>就像這樣：

render() { 
    return this.state.files.map((file, i) => { 
    return <div key={`tab--${file.path}`}> ... </div>; 
    }); 
} 

當我的應用程序將該文件重命名，它重新呈現整個選項卡（因爲key由於路徑更新，prop現在是不同的，React認爲它是一個完全不同的組件，並且處理了前一個元素）。

當重命名「文件2」到「文件3」，我想我的應用程序更新從tab--/path/to/file2的key到tab--/path/to/file3無需重新呈現組件在所有 - 所以才更新組件的key道具。
有什麼方法可以通過它們的key找到組件並隨後更新key？

Answer 1

不應使用密鑰訪問組件。他們只是用來讓反應跟蹤該範圍內的組件。我只是使用i作爲您的密鑰（以便React不會丟失組件），並使用ref（<div key={i} ref={(f) => this[file.name] = f} />）自行訪問組件（通過this[file.name]）。

你可能需要做一些清理工作，this[file.name]在file.name已被更改爲別的東西時仍然指向對象，但這會讓你更接近你需要的東西，我想。