Soy nuevo en React ES6 y creo que estoy modificando el estado de forma incorrecta. Mi código es así cuando configuro el estado en el componente principal:
class App extends React.Component { constuctor(props) { super(props); this.state = {name:"helloworld"}; } render() { return( <ChildComponent parentObj={this} /> // parentObj for parent context as props on child components ); } }Mi problema está en otros componentes secundarios, tengo que hacerlo repetidamente, ¿hay otra forma de hacerlo? No tengo ningún problema con React.createClass, pero quiero codificar en es6, así que tengo este problema.
Si quieres pasar el estado {name:"helloworld"} hazlo así:
class App extends React.Component { constuctor(props) { super(props); this.state = {name:"helloworld"}; } render() { return( <ChildComponent {...this.state} /> ); } }y en el componente hijo puedes hacer:
<Text>{this.props.name}</Text>Pero si desea pasar los accesorios del componente a su hijo:
class App extends React.Component { constuctor(props) { super(props); this.state = {name:"helloworld"}; } render() { return( <ChildComponent {...this.props} /> ); } }y en el componente hijo puedes hacer:
<Text>{this.props.stuff}</Text>//place stuff by any property name in propsAhora, si desea actualizar el estado del componente principal desde el componente secundario, deberá pasar una función al componente secundario:
class App extends React.Component { constuctor(props) { super(props); this.state = {name:"helloworld"}; } update(name){ this.setState({name:name})// or with es6 this.setState({name}) } render() { return( <ChildComponent {...this.props, update: this.update.bind(this)} /> ); } } y luego en el componente secundario puede usar esto: this.props.update('new name')
ACTUALIZAR
use más es6 y el constructor eliminado
class App extends React.Component { state = {name:"helloworld"}; // es6 function, will be bind with adding .bind(this) update = name => { this.setState({name:name})// or with es6 this.setState({name}) } render() { // notice that we removed .bind(this) from the update return( //send multiple methods using ',' <ChildComponent {...this.props, update = this.update} /> ); } }si quieres enviar todo el estado:
return( <ChildComponent {...this.state} /> );Pero esto es probablemente una mala idea :)
editar: en su escenario, esto envía una propiedad 'nombre' al componente secundario con el valor 'helloworld'