Как обернуть этого ребенка в компонент высшего порядка?

Question

const LoggedInView = (props) => <Text>You are logged in!</Text>
export default withAuth(LoggedInView)


const withAuth = (component) => <AuthRequired>{ component }</AuthRequired>


const AuthRequired = (props) => {
    const context = useContext(AuthContext)
    if(!context.auth){
        return (
            <View style={styles.container}>
               <Text>You need to login . Click here</Text>
            </View>
        )
    }
    return props.children 
}

Мой <AuthRequired> вид работает нормально, а мой withAuth - нет.

Answer 1

HOCs берут компонент и возвращают другой компонент. Вы берете компонент и возвращаете узел React, а не компонент. Ссылка на документы

В вашем случае вы сможете сделать что-то вроде:

const withAuth = (Component) => (props) => <AuthRequired><Component ...props /></AuthRequired>

Это может быть легче понять как:

function withAuth(Component) {
    return function WithAuthHOC(props) {
        return (
            <AuthRequired>
                <Component ...props />
            </AuthRequired>
        );
    }
}

Answer 2

Вы можете использовать Вспомогательный компонент. Это компонент более высокого порядка. Вспомогательный элемент - это то, что не имеет смысловой цели, но существует для группировки элементов, стиля и т. Д. Просто создайте компонент с именем Aux.js и поместите его в него:

const aux = ( props ) => props.children;

export default aux;

Затем оберните withAuth с доп.

const withAuth = (component) => {
     return ( 
           <Aux> 
               <AuthRequired>{ component }</AuthRequired>
           </Aux> 
      );
}

Answer 3

Как я знаю, вы не можете вернуть функцию в качестве детей в React. Как насчет того, чтобы вы попробовали это?

const LoggedInView = <div>You are logged in!</div>;

Этот код работает, когда я пробовал на своем ноутбуке.

Пожалуйста, посмотрите на эту ссылку: Функции не действительны как Reactребенок. Это может произойти, если вы возвращаете компонент вместо рендера