通過編程方式注入屬性反應本地

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)} 
    ) 
    } 

} 

我如何沿着FormItem.saysomething傳遞的屬性FormItemText組件。

感謝

Answer 1

你必須使用direct manipulation以編程方式注入屬性。

1. 首先將ref屬性添加到FormItemText組件。
2. 創建一個函數TextInput.onChangeText調用setNativeProps。
3. 完成！

注意direct manipulation是計算密集型的 - 需要做出反應到每一個不透明的變化，即使視圖及其孩子的其他屬性沒有改變時重新渲染的組件層次。通常這種開銷不是一個問題，但是當執行連續動畫和響應手勢時，明智地優化你的組件可以提高你的動畫的保真度。

有關更多信息和示例，請參閱React Native文檔here。

Answer 2

我們做了類似於您所問的內容。

我們必須接受一些FormInputs的兒童Form組件：

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

窗體需要給予一定的功能和屬性到的formInput。例如，FormInput在聚焦時可能需要滾動父窗體。

我們這個使用情境做出反應
https://facebook.github.io/react/docs/context.html

在您的例子做的，它最終會看起來像這樣：

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