Según fb docs, this.props.children es una estructura de datos opaca y no debe manipularse directamente.
De hecho, los documentos dicen que deberíamos usar las funciones de biblioteca en React.Children
Mirando las funciones de la biblioteca, todas son getters, lo que me lleva a creer que no deberíamos estar mutando this.props.children
¿Es esto cierto? ¿Podemos mutar this.props.children (como insertar un componente dinámicamente, etc.)?
¡Gracias!
No puede (o no debe) mutar a los children directamente. Sin embargo, puede "modificar" su salida a través de la asignación:
const Hydrogen = props => (<div>{props.weight}</div>); const Oxygen = props => (<div>{props.weight}</div>); const Water = props => ( <div className='water'> {React.Children.map(props.children, child => ( React.cloneElement(child, { weight: props.weight / React.Children.count(props.children) }) ))} </div> ); const WaterBalloon = props => ( <div className='water-balloon'> <Water weight={3}> <Hydrogen /> <Hydrogen /> <Oxygen /> </Water> </div> );Aquí "modifico" los niños pasados a Agua, pasándoles la propiedad de peso.
Si necesita la capacidad de "agregar/eliminar", tal vez debería considerar rediseñar de tal manera que mantenga una matriz de "datos" y luego complete los componentes a partir de esos datos:
https://jsfiddle.net/814jze3z/
const Item = props => ( <li>{props.time}</li> ); class List extends React.Component { constructor() { super(); this.state = { items: [] }; this.addItem = this.addItem.bind(this); this.removeItem = this.removeItem.bind(this); } addItem() { let item = { id: this.state.items.length + 1, time: +new Date() }; this.setState({ items: this.state.items.concat([item]) }); } removeItem() { this.setState({ items: this.state.items.concat().splice(1) }); } render() { return ( <div> <button onClick={this.addItem}>Add Item</button> <button onClick={this.removeItem}>Remove Item</button> <ul className='list'> {this.state.items.map(item => ( <Item key={item.id} time={item.time} /> ))} </ul> </div> ); } }