在 React 中将一组组件作为道具传递

Question

I am looking for a way to pass an array of components to a prop for a tabbing component. Just wondering if that's possible.

So I need to create a component that will shorten material ui's tabbing method but I cannot find a way to pass an array of components as a prop so that it will be rendered on that component.

Here is an example of my code:

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

And I map them on my code like this and I used lodash map method:

map(components, component=>{

 <TabContainer>{component}</TabContainer>

}

But it returns this. Warning: react-swipeable-view: one of the children provided is invalid: null. We are expecting a valid React Element

And when I console.log the component it returns: {$$typeof: Symbol(react.element), type: ƒ, key: null, ref: null, props: {…}} Object Need help

I hope it can render the components.

Answer 1

Cause you need return a value in map.

map(components, component=>{

 return <TabContainer>{component}</TabContainer>

}

Answer 2

Component's name must be started with a capital letter, but I can see here components = [<component1/>, <component2/>] they were not. So you must convert [<component1/>, <component2/>] to [<Component1/>, <Component2/>] . Second thing I see your map syntax is strange, it must be like this:

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

Reference: https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

Answer 3

Your es6 syntax needs a subtle adjustment to return the react component.

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

or, if you can use the map function from your array instead of importing from a library.

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

Answer 4

I solved This with another implementation.

I used 'react-swipeable-views' and instead passing a component I used this

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

And Changed:

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

To

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

But if you can get how to pass components via props that would be great!

Answer 5

I think you have to pass the component on array for FullWidthTab as a node value:

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

And your map continue as it is.

If this not work, try to render the component inside the map. Pass the component as node for FullWidthTab, and then render it:

map(components, component=>{

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

}

Note: this code wasn't tested!