Come passare stato con genitore di componenti bambino

Question

C'è un modo di passaggio di stato da componente principale di componenti bambino come:

var ParentComponent = React.createClass({ 
    getInitialState: function() { 
    return { 
     minPrice: 0 
    } 
    }, 
    render: function() { 
    return (
     <div onClick={this.doSomething.bind(this, 5)}></div> 
    ); 
    } 
}); 

var ChildComponent = React.createClass({ 
    getInitialState: function() { 
    return { 
     minPrice: // Get from parent state 
    } 
    }, 
    doSomething: function(v) { 
    this.setState({minPrice: v}); 
    }, 
    render: function() { 
    return (
     <div></div> 
    ); 
    } 
}); 

voglio cambiare genitore valore dello stato da componente figlio. In react.js è possibile o no?

Answer 1

È possibile utilizzare la soluzione delle limelight, ovvero passare una funzione dal genitore al figlio.

Oppure è possibile utilizzare anche progetti come React-Cursor che consente di modificare facilmente lo stato passato da un componente padre in un figlio.

---

ho fatto la mia casa struttura in (Atom-React, some details here) che utilizzano anche i cursori (ispirati a Om), e si può in qualche modo raggiungere facilmente i dati a 2 vie di legame con i cursori permettendo di manipolare lo stato gestito da un componente genitore.

Ecco un utilizzo exemple:

<input type="text" valueLink={this.linkCursor(this.props.inputTextCursor)}/> 

Il inputTextCursor è un cursore passato da un genitore di un componente figlio, e quindi il bambino può facilmente modificare i dati della controllante seemlessly.

Non so se altri involucri basati sul cursore Reagire usano questo tipo di trucco ma la funzione linkCursor è implementato molto facilmente con una semplice mixin:

var ReactLink = require("react/lib/ReactLink"); 

var WithCursorLinkingMixin = { 
    linkCursor: function(cursor) { 
     return new ReactLink(
      cursor.getOrElse(""), 
      function setCursorNewValue(value) { 
       cursor.set(value); 
      } 
     ); 
    } 
}; 
exports.WithCursorLinkingMixin = WithCursorLinkingMixin; 

modo da poter facilmente porta a questo comportamento React-Cursor

Answer 2

There is ma non è destinato a funzionare in React. L'associazione dati bidirezionale non è la soluzione ideale in React, estratto dai documenti.

In React, i dati vengono inviati in un modo: dal proprietario al figlio.

Quindi cosa si vuole fare se si vuole manipolare lo stato genitore nel proprio componente figlio sta passando un listener.

//parent component's render function 
return (
    <Child listenerFromParent={this.doSomething} /> 
) 

//child component's render function 
return (
    <div onClick={this.props.listenerFromParent}></div> 
)