时间戳

首页 > 解决方案 > 将带有变量的对象和单独的变量传递给反应本机组件有什么区别？

react-native - 将带有变量的对象和单独的变量传递给反应本机组件有什么区别？

问题描述

我在这个问题上没有成功可能是由于在谷歌搜索时缺乏适当的术语，但我仍然完全被难住了。我正在将 onPress 函数传递给 react native 中的自定义组件。当我自己通过它时：

export const AddMorePlants = ( onPress ) => {
    return (
        <TouchableHighlight
            onPress={onPress}>
.
.
.
}

我得到一个this2.props.onPress is not a function错误，但是当我有完全相同的代码时，除了在花括号中传递的 onPress ：

export const AddMorePlants = ({ onPress }) => {
    return (
        <TouchableHighlight
            onPress={onPress}>
.
.
.
}

有用！

为什么第二个有效而不是第一个？

对于一个基本问题，我很抱歉，我一直在谷歌搜索，但无法弄清楚。在此先感谢，如果需要，我可以提供更多信息。

标签： react-native

解决方案

React 中的功能组件只有一个参数。props。_ 你可以在这里阅读更多关于它的信息

所以你第一次尝试传递onPress函数实际上是这样的：

export const AddMorePlants = (props) => {
   return (
       <TouchableHighlight onPress={props}/>
   );
}

当TouchableOpacity尝试执行该方法时，它会遇到不是函数错误，因为props它是一个对象。

当你这样做时：

export const AddMorePlants = ({onPress}) => {
   return (
       <TouchableHighlight onPress={onPress}/>
   );
}

你正在做的是一种叫做解构赋值的东西，它相当于做：

export const AddMorePlants = (props) => {
   const {onPress} = props;
   return (
       <TouchableHighlight onPress={onPress}/>
   );
}

通过将括号放在括号内，您只是在做我们提到的这个解构赋值的简写版本。

这是另一个也可以使用的版本：

export const AddMorePlants = (props) => {
   return (
       <TouchableHighlight onPress={props.onPress}/>
   );
}

如您所见，有许多方法可以访问对象的属性。

重要的部分是要记住props对象是传递给功能组件的唯一参数。

我希望这可以帮助您了解那里发生了什么。

推荐阅读