リアクションのコンポーネントにajaxデータを渡す方法

Question

私はリアクションを学び、javascriptオブジェクトに格納された静的データを扱うアプリケーションを使用しています。私は今、axiosを使ってajax経由でそのデータをロードしています。

これは機能し、現在データをアプリケーションの状態で保存してから、データが読み込まれるとコンポーネントに渡しますが、データを各コンポーネントに渡す方法はありません右に感じる。

各コンポーネントは、各コンポーネントの小道具としてそれを渡すことなく、親アプリケーションのデータにどのようにアクセスできますか？

は、ここに私のコード

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

。

Answer 1

あなたの目的は完全に受け入れられますが、私が変更するのは、状態を各コンポーネントのオブジェクトに分割することだけです。これにより、1つのコンポーネントを更新するたびに、すべてのコンポーネントが更新されなくなります。

あなたの子コンポーネントが親の状態を更新しているときは、面倒です。これは、FluxやReduxのようなライブラリが便利な場所です。

スタティックデータを使用して単純なアプリケーションを作成している場合は、コンポーネントに小道具として状態を送信し続けます。