我可以将数据导出到另一个反应组件吗？

Question

我得到redux值在Data.js中创建一个新数组，我想用新的数组数据在Chart.js中绘制图表

所以...

如何将 data_pie 传递给Chart.js 我可以在Data.js 中导出data_pie 吗？

有一个react组件来获取数据

//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 中从 redux 中获得一些价值

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

我不知道如何将数组 data_pie 传递给 chart.js

Answer 1

如果在 Data.js 中操作数据，则应使用 action 和 reducer 将其保存到 redux 存储中。

当您将数据存储到 redux 存储时，只需在 Chart.js 周围创建另一个容器组件并为图表使用 mapStateToProps()。

Answer 2

是的，您可以将数据直接传递给另一个组件，我假设您的减速器部分工作正常，并且您在 data.js 中获取数据，这就是您的代码的样子

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