Modificare gli attributi dei bambini nel componente ReactJS

Question

Sto cercando di capire come modificare i figli di un componente, ad esempio, aggiungere una classe. Ho provato a fare:

var inputReactObject = React.Children.only(this.props.children); 

inputReactObject.className = "test"; 

Tuttavia, questo non sembra funzionare.

È possibile modificare gli attributi figli in un componente ReactJS?

plunker completa: http://plnkr.co/edit/msbUSDBQn17qXzBHzGXD?p=preview

Answer 1

Come menzionato da @lpiepiora plunker, il codice per fare quello che voglio sarebbe:

var inputReactObject = React.Children.only(this.props.children); 
var clonnedChild = React.addons.cloneWithProps(inputReactObject, { 
    className: "input-element test" 
}); 

return clonnedChild; 

Answer 2

Ora che cloneWithProps è deprecated, l'attuale approccio sarebbe

var inputReactObject = React.Children.only(this.props.children); 
var clonedChild = React.cloneElement(inputReactObject, { 
    className: "input-element test" 
}); 

return clonedChild;