別の反応成分にデータをエクスポートできますか？

Question

私はReduxの値を取得するので...

がどのように私はChart.jsにdata_pieを渡すことができますData.jsで新しい配列を作る、と私はChart.js

でグラフを描画する新しい配列データを使用したいです Data.jsにdata_pieをエクスポートするだけですか？

どのように私は配列を渡すことができ、私は見当がつかない

//Data.js 
import React,{ Component } from 'react' 
import { connect } from 'react-redux'; 
import raws from './another.json'; 

function filter_pie(apple,lemon){ 
    //...put raws and redux together to filter some array we need 
    } 
    return [newArray,pieName] 
} 

class Data extends Component { 
    render() { 
    const { props: { apple, lemon } } = this 
    let data_pie = filter_pie(apple, lemon) 
    return(
     <div> 
     {data_pie} //can I put the data in there ? or I don't need to write any return in this js? 
     </div> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return { 
    apple:state.apple, 
    lemon:state.lemon, 

    }; 
} 

export default connect(mapStateToProps)(Data); 

Reduxのからいくつかの値を取得するデータ

//Chart.js 

import ChartBar from './ChartBar.js'; 
import Data from './Data.js'; 

export default class Chart extends Component{ 
render(){ 
     return 
      <div className="chart"> 
       <ChartBar data={Data}/> 
      </div> 
     ); 
    } } 

そしてdata.jsで

を得るために反応するコンポーネントがあります data_pie 〜 chart.js

Answer 1

Data.jsでデータを操作する場合は、アクションとレデューサーを使用してreduxストアに保存する必要があります。

データをreduxストアに保存したときは、Chart.jsの周りに別のコンテナコンポーネントを作成し、グラフにmapStateToProps（）を使用します。

Answer 2

はい、あなたは、私はあなたの減速部が正常に動作しているとあなたが​​内のデータを取得していることを想定しています別のコンポーネントに直接データを渡すことができ、ここにあなたのコードが

//Chart.js 
import React, { Component } from 'react'; 
import PropTypes from "prop-types"; 

import ChartBar from './ChartBar.js'; 
//import Data from './Data.js'; //No need to import here 

export default class Chart extends Component{ 
    static propsTypes = { 
     data: PropTypes.array.isRequired 
    }; 

    render(){ 
     return 
      <div className="chart"> 
       <ChartBar data={this.props.data}/> 
      </div> 
     ); 
    } 
} 

とどのように見えるかは、あなたのデータファイルは次のようになります。

//Data.js 
import React,{ Component } from 'react' 
import { connect } from 'react-redux'; 
import raws from './another.json'; 

import Chart from './Chart'; //fix the path to Chart.js if that file is not in same folder. 

function filter_pie(apple,lemon){ 
    //...put raws and redux together to filter some array we need 
    } 
    return [newArray,pieName] 
} 

class Data extends Component { 
    render() { 
    const { props: { apple, lemon } } = this 
    let data_pie = filter_pie(apple, lemon) 
    return(
     <div> 
     { //data_pie} 
     { //instead use <Chart /> here and pass data_pie as prop } 
     <Chart data={data_pie} /> 
     </div> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return { 
    apple:state.apple, 
    lemon:state.lemon, 

    }; 
} 

export default connect(mapStateToProps)(Data);