在地圖內反應 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;
}), []}