正如摘要所述，本文旨在解决 React 应用中，当在类组件内部定义函数式子组件并尝试传递 props 时可能出现的 "Cannot read properties of undefined (reading 'apply')" 错误。我们将探讨错误原因，并提供清晰的代码示例，展示如何正确地在父组件和子组件之间传递数据，以实现组件的模块化和复用。
在 React 开发中，我们经常需要将组件拆分成更小的、可复用的部分。在父组件中定义并使用子组件是一种常见的模式。然而，当父组件是类组件，而子组件是函数式组件时，如果处理不当，可能会遇到 props 传递的问题，导致运行时错误。
问题分析
问题的根源在于在类组件内部使用 const 关键字定义函数式子组件。在 JavaScript 中，const 主要用于声明常量，而类成员变量应该直接在类定义中使用，无需 const。 此外，将子组件定义为父组件的实例方法可能是不必要的，并且会增加代码的复杂性。
解决方案
解决此问题的最佳方法是将函数式子组件定义为独立的组件，并在父组件中直接渲染它们。这样可以避免作用域和 this 上下文的问题，并提高代码的可读性和可维护性。
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
以下是改进后的代码示例：
import React from 'react';
import { View } from 'react-native'; // 假设你使用的是 React Native
// 定义通用的函数式子组件
const GenericChild = (props) => {
return <View a={props.a} b={props.b} c={props.c} />;
};
// 定义类父组件
export class Parent extends React.Component {
render() {
return (
<>
<GenericChild a={this.props.a} b={this.props.b} c={101} />
<GenericChild a={this.props.a} b={this.props.b} c={102} />
</>
);
}
}代码解释
- GenericChild 组件: 这是一个独立的函数式组件，它接收 a、b 和 c 作为 props，并将它们传递给 View 组件。
- Parent 组件: 这是一个类组件，它接收 a 和 b 作为 props。在 render 方法中，它渲染了两个 GenericChild 组件，并分别传递了不同的 c 值。
- Props 传递: 父组件通过 this.props.a 和 this.props.b 将自身的 props 传递给子组件，并为每个子组件指定了不同的 c 值。
注意事项
- 确保子组件所需的 props 已经正确传递给父组件。
- 避免在类组件内部定义函数式子组件，除非有明确的需求。
- 使用独立的组件定义可以提高代码的可读性和可维护性。
- 在 React Native 中，请确保已经正确导入了需要的组件，例如 View。
总结
通过将函数式子组件定义为独立的组件，并在父组件中直接渲染它们，可以有效地解决在类父组件中向函数式子组件传递 props 时可能出现的错误。 这种方法不仅简化了代码，还提高了组件的复用性和可维护性。 在编写 React 代码时，请始终注意组件的结构和 props 的传递方式，以确保代码的正确性和可读性。 记住，清晰、简洁的代码是构建健壮 React 应用的关键。
