将数据传递到React组件

Question

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

export default function() {
    return [
        {
            "name": "Michael Smith",
            "age": 40,
            "location": "New York",
            "salary": 80000
        }
    ]

}

我希望将工资数据传递给Sparklines组件以创建图形。

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

我在获取工资数据并将其传递给组件时遇到了问题。

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

我还没有测试过这段代码。但它应该能行得通。