React:将props传递给类父组件内的函数子组件时出错

cfh9epnr  于 2023-06-06  发布在  React
关注(0)|答案(1)|浏览(495)

在我的React Native应用程序中,我有一个类组件Parent,并在其中定义了两个功能组件ChildAChildB。这样做不会出错:

class Parent extends Component {
  const ChildA = () => {
    return <View a={this.props.a} b={this.props.b} c={101}/>
  }
  const ChildB = () => {
    return <View a={this.props.a} b={this.props.b} c={102}/>
  }
}

我想通过创建GenericChild来模块化它,如下所示:

class Parent extends Component {
  const GenericChild = (props) => {
    return <View a={this.props.a} b={this.props.b} c={props.c}/>
  }
  const ChildA = () => {
    return <GenericChild c={101}/>
  }
  const ChildB = () => {
    return <GenericChild c={102}/>
  }
}

这会抛出错误Cannot read properties of undefined (reading 'apply')
我做错了什么?

dw1jzc5e

dw1jzc5e1#

除非有特殊的需要,要求ChildA和ChildB成为Parent的一部分,否则前者不应该被定义为后者的示例方法。此外,类成员/属性/变量不能有const关键字
更好的方法是创建两个单独的组件并传递所需的 prop ,例如。

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} />
      </>
    );
  }
}

相关问题