javascript - _.map 值从对象到另一个对象的字段名称？

Question

努力使用词汇来正确地提出这个问题，所以这是我的代码和以下解释:

import _ from 'lodash';
import React, { Component } from 'react';

export default class Base extends Component {

    render() {
        const { cr, p } = this.props;
        return (
            <tr className='bq-bottom-border'>
                <td className='bq-column-border' colSpan='3'>Base</td>
                <td>{cr.BaseN}</td>
                <td>{'$' + (cr.Base10/1000).toFixed(1)}</td>
                <td>{'$' + (cr.Base25/1000).toFixed(1)}</td>
                <td>{'$' + (cr.BaseMedian/1000).toFixed(1)}</td>
                <td>{'$' + (cr.BaseMean/1000).toFixed(1)}</td>
                <td>{'$' + (cr.Base75/1000).toFixed(1)}</td>
                <td>{'$' + (cr.Base90/1000).toFixed(1)}</td>
            </tr>
        );
    }
}

所以我想重构这个。 BaseN是一个整数，Base10 , Base25等是百分位数。我正在设置 FE 以允许用户自己选择百分位数，因此需要摆脱硬编码。

为此，我移动了类似 10 的东西, 25等进入状态对象 p那是从 parent 那里传下来的。它看起来像这样:

percentiles = {
    p1: 10,
    p2: 25,
    p3: 50,
    p4: 75,
    p5: 90
}

然后我想做如下的事情:

_.map(percentiles, p => {
    'Base' + p
}

生成在 <td> 中使用的字段名称你看:cr.Base10 , cr.Base25等cr.本身是一个对象，每 5 个百分位数都有一次。

这是我未能理解如何实现它的地方。我无法执行以下操作:

_.map(percentiles, p => {
    <td>{'$' + (cr.Base{p}/1000).toFixed(1)}</td>
}

有没有办法做到这一点？

编辑

所以我正在尝试这个，还有一些其他的变体，但它返回时未定义，所以不确定我做错了什么......

testRender(percentiles, cr) {
    _.map(_.values(percentiles), p => {
        console.log(cr.Base + {p});
        console.log(cr.Base + p);
    })
}

或者:

testRender(percentiles, cr) {
    _.map(_.values(percentiles), p => {
        let field = 'Base' + p;
        console.log(cr.field);
        console.log(cr + '.field');
    })
}

我可以做 console.log(cr.Base10);并且按预期工作。

Answer 1

使用 Lodash，您可以从百分位数对象的属性创建一个数组:

让_percentiles = _.values(percentiles);

然后您可以在对“map”的调用中遍历它