React：要素キーを動的に設定する

Question

tl; dr - keyをReact Elementにどのように動的に追加しますか？

---

私は一人で立ったときに、子供の静的なリストを持って、リアクトコンポーネントがあります。

<componentA> 
    <child ... /> 
    <child ... /> 
    <child ... /> 
</componentA> 

リストは、彼らがしているよう子どもたちのいずれにもキーが存在しない静的であるために必要ありません。

は今、私はこの1つをラップし、それがダイナミックな子供になり、別のコンポーネントがあります。

：子供として

function componentB(componentA) { 
    return class extends React.Component { 
    render() { 
     const filteredChildren = // ... filter this.props.children 

     return (<componentA> 
     {filteredChildren} 
     </componentA>) 
    } 
    } 
} 

は今、私は彼らにkey Sを追加する必要が動的であるが、しかし、私のような何かをしようとした場合

React.Children.map((child, i) => { 
    child.key = i; 
    return child 
}); 

keyは読み取り専用です。 this questionからは、cloneElementも同様です。では、動的にkeyを設定する方法はありますか？

Answer 1

使用cloneElementを：

React.cloneElementの2ⁿᵈ引数は、新しい小道具であることが知られて

React.Children.map(this.props.children, (child, i) => 
     React.cloneElement(child, { key: i }) 
); 

複製された要素この例では、これらの小道具の1つがkeyです。

Answer 2

あなたの関数では、単にこれを行うので、私は、同じ問題を持っていた：map内

function componentB(componentA) { 
    return class extends React.Component { 
    render() { 
     const filteredChildren = // ... filter this.props.children 

     return (<componentA key={function_generating_random_strings()}> 
     {filteredChildren} 
     </componentA>) 
    } 
    } 
}