Передача массива компонентов в качестве реквизита в реакции

Question

Я ищу способ передать массив компонентов в реквизит для компонента с вкладками. Просто интересно, возможно ли это.

Итак, мне нужно создать компонент, который сократит метод табуляции материала пользовательского интерфейса, но я не могу найти способ передать массив компонентов в качестве реквизита, чтобы он отображался на этом компоненте.

Вот пример моего кода:

<FullWidthTab
components = [<Component1/>, <Component2/>] //this is where components renders
 menuLabels = ['Menu1', 'Menu2'] //this is where title render
/>

И я отображаю их в своем коде следующим образом, и я использовал метод карты lodash:

map(components, component=>{

 <TabContainer>{component}</TabContainer>

}

Но это возвращает это. Предупреждение: реакция-свип-просмотр: один из предоставленных дочерних объектов недействителен: нуль. Мы ожидаем действительный элемент реагирования

И когда я console.log компонент, он возвращает: {$$ typeof: Symbol (react.element), тип: ƒ, ключ: null, ref: null, реквизиты: {…}} Объект Нужна помощь

Я надеюсь, что это может сделать компоненты.

Answer 1

Я думаю, что вы должны передать компонент массива для FullWidthTab в качестве значения узла:

<FullWidthTab
components = [component1, component2] //this is where components renders
 MenuLabels = ['Menu1', 'Menu2'] //this is where title 
render
/>

И ваша карта продолжится, как есть.

Если это не сработает, попробуйте визуализировать компонент внутри карты. Передайте компонент как узел для FullWidthTab, а затем отобразите его:

map(components, component=>{

 <TabContainer>{<component/>}</TabContainer>

}

Примечание: этот код не был проверен!

Answer 2

Я решил это с другой реализацией.

Я использовал 'response-swipeable-views' и вместо передачи компонента я использовал это

       <SwipeableViews
            axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
            index={this.state.value}
            onChangeIndex={this.handleChangeIndex}
        >
            { children }
        </SwipeableViews>

И изменено:

<FullWidthTab
components = [<Component1/>, <Component2/>] //this is where components renders
 menuLabels = ['Menu1', 'Menu2'] //this is where title render
/>

К

<FullWidthTab
 components = [<Component1/>, <Component2/>] //this is where components renders
 menuLabels = ['Menu1', 'Menu2'] //this is where title render
>
  <Component1/>
  <Component2/>
</FullWidthTab>

Но если вы сможете понять, как передавать компоненты через подпорки, это было бы здорово!

Answer 3

Имя компонента должно начинаться с заглавной буквы, но я вижу здесь components = [<component1/>, <component2/>] это не так. Поэтому вы должны конвертировать [<component1/>, <component2/>] в [<Component1/>, <Component2/>]. Во-вторых, я вижу, что ваш map синтаксис странный, он должен быть таким:

components.map(component => (<TabContainer>{component}</TabContainer>))

Ссылка: https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

Answer 4

Ваш синтаксис es6 нуждается в тонкой настройке для возврата компонента реакции.

map(components, component => <TabContainer>{component}</TabContainer> )

или, если вы можете использовать функцию карты из вашего массива вместо импорта из библиотеки.

components.map( component => <TabContainer>{component}</TabContainer> )

Answer 5

Потому что вам нужно вернуть значение на карте.

map(components, component=>{

 return <TabContainer>{component}</TabContainer>

}