反応的にネイティブでプロパティをプログラムで注入する

Question

コンポーネントのオブジェクトのプロパティを挿入する方法を知りたいと思います。以下

アプリケーションコンテナ・コンポーネント・コードの下

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

は2成分であるています。

FormItem extends Component { 

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

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

} 

と

FormItemText extends Component { 

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

} 

どのように私はFormItemTextコンポーネントにプロパティとしてFormItem.saysomethingに沿って渡します。あなたがプログラム的にプロパティを注入するdirect manipulationを使用する必要が

おかげ

Answer 1

。

1. 最初にFormItemTextコンポーネントにref属性を追加します。
2. TextInput.onChangeTextにsetNativePropsを呼び出す関数を作成します。
3. 完了！

direct manipulationは計算量が多い - ビューとその子の他のプロパティが変更されていなくても、不透明度が変更されるたびにReactはコンポーネント階層を再描画する必要があります。通常、このオーバーヘッドは問題ではありませんが、継続的なアニメーションを実行してジェスチャーに応答する場合は、コンポーネントを賢明に最適化するとアニメーションの忠実性が向上します。

詳細および例については、ネイティブ・ドキュメントのReact：hereを参照してください。

Answer 2

私たちは、あなたが求めているものに似たようなことをしています。

が

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

フォームFormInputにいくつかの機能や特性を与える必要があります：

は、私たちは子供のようにFormInputsの数を受け付けフォームコンポーネントを持っています。たとえば、FormInputは、フォーカスが当たっているときに親フォームをスクロールする必要があります。

<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, 
}; 

：

私たちは、これはあなたの例では
https://facebook.github.io/react/docs/context.html

反応させ、コンテキストを使用しない、それはこのような何かを探して終わるだろう