javascript - 如何减少 React Component 中的硬编码部分？

Question

这是硬编码的部分：

const filtersInfo = [
        {
            resetValue: props.setClass,
            valueInfo: classValue && <p>Class: {classes.find(c => c.slug === classValue).name} x</p>
        },
        {
            resetValue: props.resetManaCost,
            valueInfo: manaCostBar && <p>Mana : {manaCostBar} x</p>
        },
        {
            resetValue: props.setTextFilter,
            valueInfo: textFilter && <p>{textFilter} x</p>
        },
//10 more items
]

然后我只是遍历它：

const filterItems = filtersInfo.map((f, i) => <SimpleInfo key={i} resetValue={f.resetValue} valueInfo={f.valueInfo} />)

如何减少这种硬编码？我想我应该把它放在我的 Redux 商店中，但每个部分都依赖于不同的减速器，这样做会很麻烦。

标签： javascriptreactjsredux