类组件中的功能组件 React Native答案

【问题标题】：Functional componenet in a class component React Native类组件中的功能组件 React Native
【发布时间】：2020-05-03 10:52:35
【问题描述】：

您好，我有以下功能组件，它本身就可以完美运行

function MeditationList({route, navigation}) {
  const adress = route.params;

  return (
    <View>
      <HeaderBar />
      <Text>
        You have a number of {JSON.stringify(adress.item.numMed)} meditations
      </Text>
    </View>
  );
}

但是当我试图将它包含在一个类组件中时它不起作用，给我以下错误

class PreScreen extends Component {
  meditationList = ({route}) => {
    const adress = route.params;

    return (
      <Text>
        You have a number of {JSON.stringify(adress.item.numMed)} meditations
      </Text>
    );
  };
  render() {
    return (
      <ScrollView>
          {this.meditationList()}
      </ScrollView>
    );
  }

我想这是我犯的一些愚蠢的错误。谢谢。

【问题讨论】：

您在调用 this.meditationList() 时没有预期的参数 {route}

标签： reactjs react-native react-native-navigation

【解决方案1】：

props 不会自动注入到您的方法中。如果你想使用路由，你应该使用 this.props.route

class PreScreen extends Component {
  meditationList = () => {
    const adress = this.props.route.params;

    return (
      <Text>
        You have a number of {JSON.stringify(adress.item.numMed)} meditations
      </Text>
    );
  };
  render() {
    return (
      <ScrollView>
          {this.meditationList()}
      </ScrollView>
    );
  }

【讨论】：