Inject eine Eigenschaft programmatically in reagieren native

Question

Ich würde gerne wissen, wie man eine Eigenschaft ein Objekt einer Komponente injizieren.

Unten finden Sie die App Container Komponentencode

<FormItem element={<FormItemText />} /> 

Im Folgenden sind die 2-Komponenten.

FormItem extends Component { 

    saysomething(){ 
    console.log("Saying something") 
    } 

    render(){ 
    return (
     {this.props.element} 
    ) 
    } 

} 

und

FormItemText extends Component { 

    render(){ 
    return (
     <TextInput onChangeText={(text) => this.props.saysomething(text)} 
    ) 
    } 

} 

Wie kann ich entlang der FormItem.saysomething als Eigenschaft zu FormItemText Komponente zu übergeben.

Dank

Answer 1

Sie haben direct manipulation zu verwenden, um eine Eigenschaft programmatisch zu injizieren.

1. Fügen Sie zuerst ein ref Attribut zu Ihrer FormItemText Komponente hinzu.
2. Erstellen Sie eine Funktion, um setNativeProps auf Ihrem TextInput.onChangeText aufzurufen.
3. Fertig!

Beachten Sie, dass direct manipulation rechenintensiv ist - Bedürfnisse reagieren auf neu rendern der Komponentenhierarchie jedes Mal, wenn die Opazität ändert, auch wenn andere Eigenschaften der Ansicht und ihre Kinder haben sich nicht geändert. In der Regel ist dieser Overhead kein Problem, aber wenn Sie fortlaufende Animationen ausführen und auf Gesten reagieren, können Sie durch eine sorgfältige Optimierung Ihrer Komponenten die Wiedergabetreue Ihrer Animationen verbessern.

Weitere Informationen und Beispiele finden Sie unter Native Dokumentation reaktivieren here.

Answer 2

Wir machen etwas ähnliches wie Sie fragen.

Wir haben ein Formular-Komponente, die eine Reihe von FormInputs als Kinder akzeptiert:

<Form> 
    <FormInput /> 
    <FormInput /> 
</Form> 

Das Formular benötigt einige Funktionen und Eigenschaften der FormInput zu geben. Beispielsweise muss der FormInput möglicherweise das übergeordnete Formular scrollen, wenn es fokussiert ist.

Wir tun dies ein Zusammenhang
https://facebook.github.io/react/docs/context.html

In Ihrem Beispiel Reagieren Sie verwenden, würde es so etwas wie dies am Ende aussehen:

<FormItem> 
    <FormItemText /> 
</FormItem> 

FormItem extends Component { 
    getChildContext() { 
    return { saysomething: this.saysomething }; 
    } 

    saysomething(){ 
    console.log("Saying something") 
    } 

    render(){ 
    return (
     {this.props.children} 
    ) 
    } 
} 
FormItem.childContextTypes = { 
    saysomething: PropTypes.func, 
}; 

FormItemText extends Component {  
    render(){ 
    return (
     <TextInput onChangeText={(text) => this.context.saysomething(text)} 
    ) 
    } 
} 
FormItemText.contextTypes = { 
    saysomething: PropTypes.func, 
};