任務需求
一個父組件Parent下兩個子組件Child1和Child2,Child1里是一個列表數據,點擊某個元素彈出一個彈框Child2,Child2里展示這個元素的具體信息,大概像下面這樣:
2017-06-17_160558.jpg
點擊下面的一排頭像出現一個彈框,展示該元素的一些信息,我只截取了關鍵代碼。
代碼實現
Child2(列表):
class Child2 extends Component {
openModal(rowData) {
this.props.openModal(rowData)
}
_renderRow(rowData, sectionID, rowID) {
let avatar = rowData.avatar_url ? rowData.avatar_url : common.avatar;
return(
<TouchableOpacity onPress = {() => this.openModal(rowData)}>
<Image source = {{uri:avatar}} />
</TouchableOpacity>
)
}
//...省略代碼
}
我需要將rowData傳遞給彈框,使用this.props.openModal(rowData)
,也就是先把這個值傳遞到父組件。
Parent(父組件):
class Parent extends Component {
this.state = {
data: '',
}
openScoreModal(rowData) {
//在這里就能拿到Child2想要傳遞的數據rowData了,現在將這個數據存到父組件的state里面
this.setState({
data: rowData
})
}
<LikeList
openModal = {(rowData) => this.openScoreModal(rowData)}
/>
<ScoreModal
data = {this.state.data}
closeModal = {() => this.closeScoreModal()}
modalVisible = {this.state.scoreModalVisible}/>\
//這里就將從Child2拿到的data傳給Child1了
}
現在,再由父組件將從Child2拿到的數據傳給Child1,由Child1展示。
Child1(彈框):
render() {
let avatar = {uri: this.props.data.avatar_url} //拿到的數據
let name = this.props.data.name //拿到的數據
let count = this.props.data.count//拿到的數據
return(
<Modal visible = {this.props.modalVisible}
transparent = {true}
onRequestClose = {() => {}}
animationType = {'none'}>
<View style={styles.modalContainer}>
<TouchableOpacity style = {styles.closeBtn} onPress = {this.props.closeModal}>
<Image source = {Images.closeIcon}/>
</TouchableOpacity>
<View style = {styles.WhiteContent}>
<Text style = {styles.username}>{name}</Text>
<Text style = {styles.whiteText}>Ta點亮了{count}顆星</Text>
</View>
<Image source = {avatar} style = {styles.avatar}/>
</View>
</Modal>
)
}