javascript - 如何使用具有相似变量的 React 钩子？

Question

所以我对 React 钩子还很陌生，我正在尝试再次使用类似的变量。

我想要几个按钮，每个按钮启动不同的登录机制，如下所示：

export default function App() {

    let [request, response, onGoogleLoginButtonPress] = Google.useAuthRequest({
      responseType: ResponseType.Token,
      clientId: 'NUMBER',
    });
    let [request, response, onFBLoginButtonPress] = Facebook.useAuthRequest({
      responseType: ResponseType.Token,
      clientId: 'NUMBER',
    });

return(

            <View>
              <TouchableOpacity style={[styles.googleRed, styles.loginButton]}
                  self={this} onPress={() => onGoogleLoginButtonPress()}>
                  <View></View>
                  <Text style={styles.loginText}>Log In with Google</Text>
                  <Image style={styles.loginImg} source={GoogleImg} />
              </TouchableOpacity>
              <TouchableOpacity style={[styles.facebookBlue, styles.loginButton]}
                  self={this} onPress={() => onFBLoginButtonPress()}>
                  <View></View>
                  <Text style={styles.loginText}>Log In with Facebook</Text>
                  <Image style={styles.loginImg} source={FBImg} />
              </TouchableOpacity>
            </View>
);
}

这不起作用，因为请求和响应正在被重用。

现在我想我可以将它们重新命名为 fbRequest 和 googleRequest 等，但这看起来很混乱，就像添加了不必要的变量 - 如果有请求，它只会是一个请求。

如何在使用相关函数填充它们的同时重复使用这些变量？

标签： javascriptreactjs

Answer 1

我看到两个选项。我更喜欢第一个。。

首先，将您的按钮重构为通用按钮功能组件，这样您就可以使它们看起来相似且可维护

const AuthButton = (props) => {

  return(
    <TouchableOpacity style={props.styles}
      self={this} onPress={props.onPress}>
      <View></View>
      <Text style={styles.loginText}>{props.buttonText}</Text>
      <Image style={styles.loginImg} source={props.imgSrc} />
    </TouchableOpacity>
  )

}

在此之后你有两个选择。

选项 1：每个 Auth 类型的功能组件用其自定义钩子包装按钮

  const FacebookAuthBtn = (props) => {

    let [request, response, onButtonPress] = Facebook.useAuthRequest({
      responseType: ResponseType.Token,
      clientId: '195616021512894',
    });
    
    return(
      <AuthButton 
        styles={[styles.facebookBlue, styles.loginButton]}
        imgSrc={FBImg}
        onPress={onButtonPress}
        buttonText={"Log In with Facebook"}        
      />
    )
  }

然后为谷歌做一个类似的选择。

  const GoogleAuthBtn = (props) => {

    let [request, response, onButtonPress] = Google.useAuthRequest({
      responseType: ResponseType.Token,
      clientId: '195616021512894',
    });
    
    return(
      <AuthButton 
        styles={[styles.googleRed, styles.loginButton]}
        imgSrc={GoogleImg}
        onPress={onButtonPress}
        buttonText={"Log In with Google"}        
      />
    )
  }

你最终会得到

export default function App() {  


  const handleAuthenticate = (data) => {
    // do what you need to when user authenticates
  }

  return(
    <View>
      <FacebookAuthBtn onAuthenticate={handleAuthenticate} />
      <GoogleAuthBtn onAuthenticate={handleAuthenticate}/>  
    </View>  
  );
}

这样做的好处是，您可以将“onAuthenticate”回调从您的应用程序级别传递给这两个组件并适当地处理它。

您可以在每个 FacebookAuthBtn 和 GoogleAuthBtn 中执行此操作，方法是在响应上设置一个 useEffect

 const FacebookAuthBtn = (props) => {

    let [request, response, onButtonPress] = Facebook.useAuthRequest({
      responseType: ResponseType.Token,
      clientId: '195616021512894',
    });

    useEffect(() => {
      if (response && typeof props.onAuthenticate === 'function') {
        props.onAuthenticate(response);
      }
    },[response])
    
    return(
      <AuthButton 
        styles={[styles.facebookBlue, styles.loginButton]}
        imgSrc={FBImg}
        onPress={onButtonPress}
        buttonText={"Log In with Facebook"}        
      />
    )
  }

选项 2：使用 AuthButton 两次（您需要像选项 1 一样传入道具）

export default function App() {

    let [gRequest, gResponse, onGoogleLoginButtonPress] = Google.useAuthRequest({
      responseType: ResponseType.Token,
      clientId: '195616021512894',
    });
    
    let [fRequest, fResponse, onFBLoginButtonPress] = Facebook.useAuthRequest({
      responseType: ResponseType.Token,
      clientId: '195616021512894',
    });

    return(
      <View>
        <AuthButton {googleAuthPropsHere}/>  
        <AuthButton {facebookAuthPropsHere}/>
      </View>
    );
}