Modyfikuj atrybuty elementów podrzędnych w komponencie ReactJS

Question

Próbuję dowiedzieć się, jak zmodyfikować elementy podrzędne komponentu, na przykład dodać klasę. Próbowałem wykonać:

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

inputReactObject.className = "test"; 

To jednak nie działa.

Czy można modyfikować atrybuty podrzędne w komponencie ReactJS?

Pełna plunker: http://plnkr.co/edit/msbUSDBQn17qXzBHzGXD?p=preview

Answer 1

Jak wspomniano przez @lpiepiora plunker kod robić co chcę byłoby:

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

return clonnedChild; 

Answer 2

Teraz cloneWithProps jest deprecated, obecne podejście byłoby

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

return clonedChild;