如何在高阶组件中包装此子级？

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 
}

我的＜代码＞

Answer 1

正如我所知，您不能在React中返回子函数。你试试这个怎么样？

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

当我在我的笔记本电脑上尝试时，这个代码是有效的。

请看看这个链接:函数作为React子级是无效的。如果您返回一个组件而不是从render返回，可能会发生这种情况

Answer 2

您可以使用辅助组件。它是高阶分量。辅助元素是不具有语义目的，但为了分组元素、样式等目的而存在的东西。只需创建一个名为< code>Aux.js的组件，并将它放在:

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

export default aux;

然后用Aux将＜code＞与AUTH＜/code＞包装。

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

Answer 3

HOC获取一个组件并返回另一个组件。您正在获取一个组件并返回一个React节点，而不是组件。文档参考

就您的情况而言，您应该能够做到以下几点:

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

它可能更容易理解为：

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