为啥我的 prop 没有记录或在 React Native 中传递？

Posted 2023-02-19

【中文标题】为啥我的 prop 没有记录或在 React Native 中传递？

【英文标题】：Why isn't my prop logging or being passed in React Native?为什么我的 prop 没有记录或在 React Native 中传递？

【发布时间】：2017-11-05 14:48:18

【问题描述】：

我制作了一个名为 IconButton 的组件，它接受一些道具并传递任何额外的道具。

import Icon from 'react-native-vector-icons/FontAwesome';

const IconButton = ( icon, title, ...props ) => 
    console.log(props); // Actual: , expected:  onPress: [function] 
    return (
        <View style= iconBox   ...props >
           <Icon name= icon  size= 48  color="black" />
           <Text> title </Text>
        </View> 
;

然后我渲染它：

const render = () => (
    <IconButton icon='plus' title='add' onPress= () => console.log('hi')  />
);

但是，当我尝试使用console.log 记录它时，onPress 没有出现；它记录了一个空对象。此外，它没有传递给我的View，因为按下时它没有调用onPress。但是当我通过不同类型的不同道具（例如数字和字符串）时，它显示得很好。

为什么没有将它传递给我的View，为什么没有记录道具？如果这可能会影响任何事情，我也在使用 Expo。我已经设置了一个问题on GitHub。

【问题讨论】：

这很令人沮丧，因为在 Google 上似乎没有其他人遇到这个问题...为什么只有我自己似乎无法通过 props 传递函数...

不确定实际问题，但我通常参考父级onPress=this.props.onPress 上的道具。这样做的好处是你知道你期待什么道具，而不是通过发送所有东西。

同意。我添加了一个带有允许回调的演示代码的编辑。我将发布我的完整代码，但我有一种感觉，这是因为我的一个导入或某些东西正在破坏 React 本机的工作方式......也许像矢量图标......

【参考方案1】：

日志记录问题是 Expo 的一个错误，它使用 JSON.stringify 和其他方法提供输出，但没有正确输出对象。该错误还包含诸如 onPress 之类的函数，它们是对象的一部分，并导致 console.log 根本不记录它，请参见此处。问题是 on GitHub，并将在 2017 年 6 月 19 日的下一次 SDK 更新中修复。

现在谈一个不同的问题，View 不需要 onPress 道具，它不应该是可触摸的。要获得可触摸的视图，请尝试以下包装器：

TouchableHighlight，在触摸时，视图中添加了一种色调 TouchableNativeFeedback，

仅限 Android

，响应触摸的常规视图 TouchableOpacity，触摸时，视图不透明度降低 TouchableWithoutFeedback，触摸时没有可见的反馈，但接受点击（你不应该使用它，所有交互都应该有可见的反馈以获得良好的用户体验）