Question

我正在学习一些React和Redux。我有一个函数，在另一个名为persons_list.js的文件中返回一组人。看起来像这样。

import React, { Component } from 'react';
import {connect} from 'react-redux';
import { Sparklines, SparklinesLine } from 'react-sparklines';

class PersonList extends Component {
    personsData = {

    }


    render() {
        return (
            <Sparklines height={120} width={180} data={personsData}>
            <SparklinesLine color="red" />
            </Sparklines>
            )
    }
}

function mapStateToProps(state) {
    return {
        persons: state.person
    }
}

export default connect(mapStateToProps)(PersonList);

我想将薪水数据传递给Sparklines组件来创建图表。

{{1}}

我无法获取薪资数据并将其传递给组件。

Answer 1

你可以试试这个：

...
render(){
    // Create an array and populate it with salary value in all the
    // objects in this.props.persons array
    const personsData = [];
    this.props.persons.forEach(person => personsData.push(person.salary));

    return (
        <Sparklines height={120} width={180} data={personsData}>
            <SparklinesLine color="red" />
        <Sparklines>
    );
}
...

我还没有测试过这段代码。但它应该有用。

将数据传递到React组件

1 个答案: