[英]Pass, Receive, and Use function into child Component
我仍在學習ReactJS / React Native,我確信自己會遇到愚蠢的事情。 這是我的情況:我想在子組件中接收數據並將其顯示在Modal中。 所以:
我有一個像這樣的功能(axios,API等):
getProductInfo = (product_id) => {
axios.get(
`API-EXAMPLE`
)
.then((response) => {
this.setState({
isVisible: false,
productInfo: response.data
})
console.log(this.state.productInfo);
})
}
我通過“ onModalPress”將該函數傳遞給我的子組件:
<CatalogList productsList={this.state.displayProducts} onModalPress={this.getProductInfo}/>
在這里,有關子組件的一些信息:
const CatalogList = ({productsList, onModalPress}) => (
<Card containerStyle={styles.container}>
<View style={{ padding:20, margin:0, flexDirection: 'row', flexWrap: 'wrap', flex: 1, justifyContent: 'space-between' }}>
{
productsList.map((p, i) => {
return (
<TouchableHighlight key={i} onPress={() => onModalPress(p.id)}>
<View style={style.card}>
<View style={style.content}>
<View style={{width: 170, zIndex: 2}}>
<Text style={style.name}>{p.id}</Text>
<Text style={style.name}>{p.name}</Text>
<Text style={style.winemaker}>Domaine : {p.domain}</Text>
<Text style={style.winemaker}>Origine : {p.wine_origin}</Text>
<Text style={style.aop}>Appellation : {p.appellation}</Text>
</View>
<Image
style={style.image}
source={{ uri: p.image, width: 140, height: 225, }}
/>
</View>
<View style={style.entitled}>
<Text style={[style.priceText, style.cadetGrey]}>{p.publicPriceText}</Text>
<Text style={style.priceText}>{p.subscriberPriceText}</Text>
</View>
<View style={style.row}>
<Text style={[style.price, style.cadetGrey]}>{p.price} €</Text>
<Text style={style.price}>{p.subscriber_price} €</Text>
</View>
<View style={[{backgroundColor: p.label_colour}, style.label]}>
<Text style={style.labelText}>{p.label}</Text>
</View>
<Modal isVisible={false}>
<View style={{ flex: 1 }}>
{/* <Text>{productInfo.rewiew_wine_waiter}</Text> */}
</View>
</Modal>
</View>
</TouchableHighlight>
);
})
}
</View>
</Card>
);
“ p.id”來自我通過另一個Axios API調用獲得的另一個數據(productList)。 通過“ p.id”,我獲得了我的函數中需要的product_id
getProductInfo
一切正常,我在console.log(this.state.productInfo)中顯示信息。
我的問題,我認為這很容易...這就是我如何“存儲/存儲” console.log中的此信息,並在const / props中在我的Modal中使用它,並在此示例中進行調用:
<Modal isVisible={false}>
<View style={{ flex: 1 }}>
<Text>{productInfo.rewiew_wine_waiter}</Text>
</View>
</Modal>
當然,任何其他建議都歡迎!
React只是關於組件層次結構中的單向數據流
假設您有一個Container
組件來獲取所有數據:
class MyContainer extends Component{
state = {
myItensToDisplay: []
}
componentDidMount(){
//axios request
.then(res => this.setState({myItensToDisplay: res.itens}))
}
}
看起來不錯! 現在,您已經獲取了要顯示的所有數據,並以容器的狀態存儲了它們。 讓我們將其傳遞給Item
組件:
class MyContainer extends Component{
// All the code from above
render(){
const itens = this.state.myDataToDisplay.map( item =>{
return(<Item name={item.name} price={item.price} />);
})
return(
<div>
{itens}
</div>
)
}
}
現在,您要獲取要在父組件中顯示的所有數據,然后通過prop將該數據分配給它的子組件。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.