如何将 React 组件渲染为函数返回

Question

我试图将反应原生组件渲染为函数返回，但没有成功，这里是代码：

// In App.js in a new project

import * as React from 'react';
import { View, Text, TouchableOpacity, Linking, Alert } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import * as Google from 'expo-auth-session/providers/google';
import * as WebBrowser from 'expo-web-browser';
import { FacebookSocialButton, GoogleSocialButton } from "react-native-social-buttons";
import { AuthRequest, useAuthRequest } from 'expo-auth-session';


class MainClass extends React.Component {

  constructor(props) {
    super(props);
    this.state = {

    }
    WebBrowser.maybeCompleteAuthSession();
    Stack = createStackNavigator();
    () => App(() => renderRoutes());
  }

  setResponse = (response) => {
    this.setState({response:response}).then(Alert.alert(this.state.response));
  }


  LoginGoogle = () => {
    const [request, response, promptAsync] = Google.useAuthRequest({
      androidClientId: 'xxxxxxx.apps.googleusercontent.com',
      expoClientId: 'xxxxxxxx.apps.googleusercontent.com'
    });
    
    React.useEffect(() => {
      if (response?.type === 'success') {
        const { authentication } = response;
        }
    }, [response]);

    return (
      <GoogleSocialButton disabled={!request} onPress={() => {promptAsync().then(() => {const [request, response, promptAsync] = useAuthRequest({}, {setResponse(response){}})})}} />
    ) 
  }



  LoginScreen = (LoginGoogle) => {
    const nav = this.props.navigation;

    return (
      <View style={{ flex: 1, backgroundColor: "#a2eff5"}}>
        <View style={{flex: 0.15}}></View>
        <View style={{flex: 0.1, backgroundColor: "white", borderRadius: 100/2, alignItems: "center", justifyContent: "center"}}>
          <Text style={{color: "black"}}>Please, Login using buttons below!</Text>
        </View>
        <View style={{flex: 0.2}}></View>
        <View style={{alignItems:"center", justifyContent: "center"}}>
          {LoginGoogle()}
        </View>
        <View style={{flex: 0.05}}></View>
        <View style={{alignItems:"center", justifyContent: "center"}}>
          <FacebookSocialButton onPress={() => {}} />
        </View>
      </View>
    );
  }

  

  MainScreen = () => {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }

  renderRoutes = () => {
    return (
      <NavigationContainer>
        <Stack.Navigator 
        initialRouteName={"Login"}
        screenOptions={{headerShown: false}}>
          <Stack.Screen name="Login" component={LoginScreen} />
          <Stack.Screen name="Main" component={MainScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }

  
}

App = (RenderComponent) => {
  return (
    {RenderComponent}
  );
}

export default App;

这是我得到的错误： 对象作为 React 子对象无效（找到：带有键 {RenderComponent} 的对象）如果您要渲染子对象集合，请改用数组

有人知道这应该怎么做吗？

Answer 1

评论者是正确的，您试图在类组件中使用钩子作为类方法，这是行不通的。此外，钩子不应返回组件。您可以通过一点点或重新排列轻松保留所有逻辑，将钩子从类中移出到钩子中，然后在功能组件中使用它。

const useLoginGoogle = () => {
  const [request, response, promptAsync] = Google.useAuthRequest({
    androidClientId: 'xxxxxxx.apps.googleusercontent.com',
    expoClientId: 'xxxxxxxx.apps.googleusercontent.com'
  });

  React.useEffect(() => {
    if (response?.type === 'success') {
      const { authentication } = response;
    }
  }, [response]);

  return {promptAsync, disbaled: !request};
};

const LoginGoogle = () => {
  const { promptAsync, disbaled } = useLoginGoogle();
  return (
    <GoogleSocialButton disabled={disbaled} onPress={() => { promptAsync().then(() => { const [request, response, promptAsync] = useAuthRequest({}, { setResponse(response) { } }) }) }} />
  );
};

// Then wherever you want your button
<LoginGoogle />