我正在开发我的第一个React Native应用程序。我试图实现的是从父组件执行一个子函数,情况如下:
儿童
export default class Child extends Component {
...
myfunct: function() {
console.log('Managed!');
}
...
render(){
return(
<Listview
...
/>
);
}
}
家长
export default class Parent extends Component {
...
execChildFunct: function() {
...
//launch child function "myfunct"
...
//do other stuff
}
render(){
return(
<View>
<Button onPress={this.execChildFunct} />
<Child {...this.props} />
</View>);
}
}
在这个例子中,我想在父类中按下按钮的时候记录'Managed!'
,怎么可能呢?
7条答案
按热度按时间wvyml7n51#
Nader Dabit的回答已经过时了,因为在ref属性中使用String常量已经被弃用了。以下是截至2017年9月的做法:
相同的功能,但不是使用String来引用组件,而是将其存储在全局变量中。
fjaof16o2#
下面是如何使用功能组件实现这一点:
家长
1.使用
useRef()
在父元件中为子元件提供一个引用:儿童
1.将
ref
作为构造函数参数之一传递:1.从
'react'
库导入useImperativeHandle
和forwardRef
方法:1.使用
useImperativeHandle
将函数绑定到ref
对象,这将使父对象可以访问这些函数这些方法在内部不可用,因此您可能希望使用它们来调用内部方法。
1.使用
forwardRef
导出子组件:∮ ∮把所有的都放在一起∮
子组件
父组件
在Expo Snacks上有一个互动演示:https://snack.expo.dev/@backupbrain/calling-functions-from-other-components
此说明是根据TutorialsPoint article修改的
bt1cpqcv3#
可以向子组件添加引用:
然后像这样调用子对象上的方法:
t8e9dugd4#
正在回复中,希望对你有所帮助
原始溶液:
https://jsfiddle.net/frenzzy/z9c46qtv/
https://github.com/kriasoft/react-starter-kit/issues/909
x33g5p2x5#
简单易行的父--〉子函数调用方法
原始溶液:https://github.com/kriasoft/react-starter-kit/issues/909
14ifxucb6#
我想你对组件结构有些误解了。
假设你的孩子是一个为其他组件生成按钮的组件,在这个层次结构中,你的孩子必须通知它的父亲它被按下了。
子级-----〉父级
在你的父组件中使用子组件为你生成一个按钮。这样你就可以使用子组件作为一个独立的按钮。
bvpmtnay7#
这是我的源代码例如:
子组件:
父组件:
祝你好运!