无法读取子组件中未定义的属性“ props”

Question

如果运行以下代码，则会收到错误消息：“无法读取未定义的属性'props'”。这两个文件都在同一文件夹中。你能解释我在做什么错吗？

App.js

import React, { Component } from 'react';
import SeasonDisplay from './SeasonDisplay';

class App extends Component {
  state = {
    lat: null,
    errorMessage: ''
  };

  componentDidMount() {
    window.navigator.geolocation.getCurrentPosition(
      position => {
        this.setState({
          lat: position.coords.latitude
        });
      },
      err => {
        console.log(err);
        this.setState({ errorMessage: err.message });
      }
    );
  }

  render() {
    if (this.state.errorMessage && !this.state.lat) {
      return <div>Error: {this.state.errorMessage}</div>;
    }
    if (!this.state.errorMessage && this.state.lat) {
      // return <div>latitude is {this.state.lat}</div>;
      return <SeasonDisplay lat={this.state.lat} />;
    }
    return <div>Loading...</div>;
  }
}

export default App;

SeasonDisplay.js

import React from 'react';

const SeasonDisplay = props => {
  return <div>{props.lat}</div>;
};

export default SeasonDisplay;