React Native 函数组件父组件调用子组件方法
在React Native中,父组件可以通过refs来调用子组件的方法。以下是一个简单的例子:
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
class ChildComponent extends Component {
showMessage = () => {
alert('Hello from the ChildComponent!');
};
render() {
return (
<View>
<Button title="Show Message" onPress={this.showMessage} />
</View>
);
}
}
class ParentComponent extends Component {
childRef = React.createRef();
render() {
return (
<View>
<ChildComponent ref={this.childRef} />
<Button
title="Call Child Method"
onPress={() => {
if (this.childRef.current) {
this.childRef.current.showMessage();
}
}}
/>
</View>
);
}
}
export default ParentComponent;
在这个例子中,ParentComponent
创建了一个ref对象childRef
,并将其通过props传递给了ChildComponent
。ChildComponent
有一个方法showMessage
,当按下按钮时会弹出一个alert。在ParentComponent
中,当用户点击第二个按钮时,通过this.childRef.current.showMessage()
调用ChildComponent
的showMessage
方法。
评论已关闭