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

Posted 2023-02-23

【中文标题】如何将 React 组件渲染为函数返回

【英文标题】：How to render React Component as function return

【发布时间】：2021-07-02 13:03:22

【问题描述】：

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

// 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 的对象）如果您要渲染子对象集合，请改用数组

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

【问题讨论】：

RenderComponent 来自哪里？它有什么作用？

你也有编写为类属性的组件......这种语法组合将带来学习挑战。我会将您的逻辑写在App 中并删除MainClass。如果您要在这里使用钩子，请在学习时坚持这种风格

RenderComponent 来自 renderRoutes 函数

无论如何都很好。这不是有效的语法RenderComponent。你可能至少想要<>RenderComponent</>。除此之外，它几乎肯定是一个函数，所以它会是 <RenderComponent /> 或 <>RenderComponent()</>

当我尝试 RenderComponent()> 它说 RenderComponent 不是一个函数，它是 Object 的一个实例

【参考方案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 />

【讨论】：

你们错过了重点......这里的问题不在于谷歌社交按钮......它与堆栈导航器......