Реагировать на операцию распространения элементов JSX внутри карты

Question

Я сопоставляю массив внутри массива для средства выбора и пытаюсь выяснить, как вернуть элементы JSX, а не массив элементов JSX.

Пример кода:

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

Обычно мой подход заключается в использовании операторов распространения. но они не преуспевают в этом синтаксисе.

this:

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

недопустимо: дочерние элементы распространения не поддерживаются в React.

Мой грязный взгляд на это быть настроенным предварительно отрендерить. но я бы не хотел.

есть предложения?

Answer 1

Вы можете просто использовать уменьшить:

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