问如何将ajax数据向下传递到react中的组件

EN

    class App extends Component {

  constructor(props) {
    super(props);
    this.state = {appData: {}};
  }

  componentDidMount() {
    axios.get('/data/appData.json')
    .then((result)=> {
      const thisData = result.data;
      this.setState({
        appData: result.data
      });
    })
  }

  componentWillUnmount() {
    this.serverRequest.abort();
  }

  render() {

    const theData = this.state.appData;
    if (Object.keys(theData).length > 0 && theData.constructor === Object){ //if the object is not empty
      return (
        <div className="App">
          <AppHeader appData={theData} />
          <AppMenu appData={theData} />
          <MainCarousel appData={theData} />
          <HomeDetails appData={theData} />
          <Model3D appData={theData} />
          <AppMaps appData={theData} />
          <AppContact appData={theData} />
        </div>
      );
    } else {
      return (
        <div className="App"></div>
      )
    }

  }
}

function AppHeader(props) {
  return (
    <div className="App-header">
      <h2 className="App-title">{props.appData.copy.title}</h2>
      <h4 className="App-subtitle">{props.appData.copy.subtitle}</h4>
    </div>
  );
}

class MainCarousel extends Component {
  mixins: [Carousel.ControllerMixin];

  constructor(props) {
    super(props);
  }

  render() {
    const carouselItems = this.props.appData.carouselItems.map((carouselItem) =>
      <AppCarouselItem key={carouselItem.name.toLowerCase()} name={carouselItem.name} image={carouselItem.image} />
    );
    return (
      <div className="App-carousel">
        <Carousel autoplay={true} wrapAround={true}>
          {carouselItems}
        </Carousel>
      </div>
    );
  }
}