我有两个组件。一个是provider,另一个是child。现在我想在child中使用provider函数,但是用我目前的方法,它说函数是未定义的。你能看出我做错了什么吗?下面是代码。
import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
const MyProvider = (props) => {
const { children } = props;
const handlePress = () => {
console.log("Provider component function called!");
};
return (
<View>
{children}
</View>
);
};
const NoLocationAccess = (props) => {
const { handlePress } = props;
console.log("handlePress : ",handlePress)
return (
<TouchableOpacity onPress={handlePress}>
<Text>I am the child component</Text>
</TouchableOpacity>
);
};
export default NoLocationAccess;
我试过provider.wrapper,但问题更多。
3条答案
按热度按时间bq8i3lrv1#
要从子节点调用在提供程序中定义的函数,您还需要将其作为prop向下传递。
以下是修改后的代码:
Try it
cbjzeqam2#
要将
handlePress
函数作为 prop 从MyProvider
组件传递到NoLocationAccess
组件,您需要在传递给NoLocationAccess
组件的props中包含handlePress
函数。为此,可以使用MyProvider组件中的子属性 PackageNoLocationAccess
组件,并将handlePress
函数作为属性传递给NoLocationAccess
组分。请尝试以下代码。
4bbkushb3#
这花了我一段时间。但我已经做了这个高阶组件。这个想法出现在redux连接方法的脑海中。所以采取了这种方法,并创建了一个高阶组件。这是完美的工作。这里是解决方案。
高阶分量。
子组件。