Как передать компонент children в другой компонент?

Question

[Иван]

У меня есть компонент Button в приложении на react-native

const Button = ({children, callback, ...props}) => {
    return (
        <MainButton {...props} onPress={callback}>
            <Text>
                {props.children}
            </Text>
        </MainButton>
    )
}

Как я могу передать в него содержимое, когда вставляю его в другом компоненте?

<Button
callback={() => setStatusQrCode(false)}
color={color_white}
background={color_blue}
weight={600}>
    {<Text>Продолжить</Text>}
</Button>

PS не могу найти паттерн, который показывает, как передавать любой компонент как children

Answer 1

[Александр]

const Button = ({ children, callback, ...props }) => {
    return <MainButton {...props} onPress={callback}>{children}</MainButton>;
};

Comments

[Иван]

а когда вызываю компонент, children как передавать надо?

<Button
                        callback={() => setStatusQrCode(false)}
                        color={color_white}
                        background={color_blue}
                        weight={600}
                        children={() => <Text>Продолжить</Text>}
                    >
                    </Button>

[Александр]

Иван,

<Button
    callback={() => setStatusQrCode(false)}
    color={color_white}
    background={color_blue}
    weight={600}
>
    <Text>Продолжить</Text>
</Button>

Answer 2

[t800zippygod]

Так children содержит в себе все компоненты, которые ты внутри тэга прописал. Грубо говоря дерево компонентов.
Если ты хочешь в компоненте button передать все вложенные в него компоненты в MainButton -> Text, тогда тебе надо прикидывать туда не props.children, а непосредственно аргумент children