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中。它看起来像这样：

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

我想做类似以下的事情：

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

要生成<td>中使用的字段名称：cr.Base10，cr.Base25等，cr.本身就是一个每5个百分位数的对象。< / p>

这是我无法理解如何实现它的地方。我无法做到这样的事情：

_.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（百分位数）;

然后，您可以在调用“map”

的过程中对此进行迭代

Answer 2

好的，Ben Smith的答案和link帮我找到了答案：

基本上需要将语句包装在eval()中以获得解决方案：

testRender(percentiles, cr) {
    _.map(percentiles, p => {
        let field = eval('cr.Base' + (p == 'n' ? 'N' : p));
        console.log(field);
    })
}

字段的实际值记录在控制台中。

_.map将对象的值映射到另一个对象的字段名称？

2 个答案: