反应地图内JSX元素的展开操作

Question

我正在为 Picker 映射数组中的一个数组，并且正在努力弄清楚如何返回 JSX 元素而不是 JSX 元素数组。

代码示例：

{modelA.map((mA) => {
    const pickerItems = mA.modelB.map((mA) =>
        <Picker.Item value={mA} ... />,
    );
    return pickerItems;
})}

通常我的方法是使用扩展运算符。但他们在这种语法中表现不佳。

这个：

{...modelA.map((mA) => {
    const pickerItems = mA.modelB.map((mA) =>
        <Picker.Item value={mA} ... />,
    );
    return pickerItems;
})}

是非法的：React 不支持传播子节点。

我对此的肮脏看法是在渲染前对其进行配置。但我宁愿不要。

有什么建议吗？

Answer 1

你可以只使用reduce：

{modelA.reduce((arr,mA) => {
    mA.modelB.forEach((mA) => {
        arr.push(<Picker.Item value={mA} ... />)
    });
    return arr;
}), []}