Блог

Я пытаюсь создать пользовательский компонент и поместить другие компоненты, подобные или внутри этого компонента, но, похоже, он не работает (ничего не отображается). Может ли кто-нибудь быть достаточно любезным, чтобы дать ответ или, возможно, исправить мое понимание, где что-то пошло не так?

Например, если у меня есть Home страница, а внутри есть Card компонент, где внутри есть Text и View компоненты.

 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
  

Это не сработает, но если я сделаю

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

это работает, насколько я понимаю. Есть ли способ для меня написать первый пример, чтобы заставить его работать?

Большое спасибо!

Вы должны использовать реквизит «дочерние элементы», чтобы получить дочерние элементы

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

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

export default Home
  

Для того, чтобы «обернуть» компонент внутри другого, вы можете использовать props.children вот как это выглядит в функциональном компоненте react :

Компонент-оболочка:

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

Затем вы можете обернуть его вокруг любого допустимого JSX:

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

Вы можете найти больше в официальной документации react