Question

我正在尝试创建一个自定义组件并将其他组件（例如或放置在该组件内），但似乎无法正常工作（什么都没有显示）。有人可以提供一个答案，或者更正我的理解哪里出错了吗？

例如，如果我有一个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>
    )
}

这有效，据我了解。我有办法写出第一个示例使其工作吗？

非常感谢！

Answer 1

您应该使用“儿童”道具来吸引儿童

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

为了将组件“包装”在另一个组件内，您可以使用props.children，这就是它在react功能组件中的外观：

包装器组件：

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

然后，您可以将其包装在任何有效的JSX上：

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

您可以在官方react documentation

中找到更多信息

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

2 个答案: