RN - 如何创建组件并将其他组件放入其中

Question

I'm trying to create a custom component and put other components like or inside this component but it doesn't seem to be working (nothing shows up). Could someone be kind enough to provide an answer or perhaps correct my understanding where it's gone wrong?

For example, if I have a Home page and inside there's a Card component where within there's Text and View components.

import React from 'react'
import {Text, View} from 'react-native'

const CoolCard = ({props}) => {
    return(
        <View>
            {props}
        </View>
    )
}

const Home = () => {
    return(
        <View>
            <CoolCard>
                <Text>This is a cool card!</Text>
            </CoolCard>
        </View>
    )
}

export default Home

This doesn't work but if I do

const Home = () => {
    return(
        <View>
            <CoolCard props = {
                <Text>This is a cool card!</Text>
            }/>
        </View>
    )
}

this works, which I understand. Is there a way for me to write the first example to make it work?

Thanks a lot!

Answer 1

You should use the 'children' prop to get the children

const CoolCard = ({children}) => {
    return(
        <View>
            {children}
        </View>
    )
}

const Home = () => {
    return(
        <View>
            <CoolCard>
                <Text>This is a cool card!</Text>
            </CoolCard>
        </View>
    )
}

export default Home

Answer 2

In order to "wrap" a component inside another you can use props.children this is how it looks in a react functional component :

Wrapper component:

const WrapComponent = ({children}) => (
   <Text>
     {children}
   </Text>
)

Then you can wrap it around any valid JSX:

<WrapComponent> {/* put stuff here */} </WrapComponent>

You can find more in the official react documentation