Réagir: Réglage dynamique des éléments clés

Question

tl; dr - Comment ajouter dynamiquement un key à un élément de réaction?

---

J'ai un composant React que, quand à lui seul, a une liste statique des enfants:

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

Comme la liste est statique, il n'y a pas de clés sur l'un des enfants car ils sont pas besoin.

Maintenant, j'ai un autre élément qui enveloppe celui-ci et fait des enfants dynamiques:

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

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

Comme les enfants sont maintenant dynamiques que je dois ajouter key s pour eux, mais si je tente quelque chose comme:

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

il échoue en disant key est en lecture seule. De this question il semble que cloneElement est un non-go aussi bien. Donc, y at-il un moyen de définir dynamiquement un key?

Answer 1

utilisation cloneElement intérieur map:

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

connu que l'argument 2ⁿᵈ de React.cloneElement est les accessoires dEs l'élément cloné. Un de ces accessoires est le key dans cet exemple.

Answer 2

J'ai eu le même problème, donc dans votre fonction, il suffit de faire ceci:

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

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