在地图内反应 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;
}), []}