React js导出一个变量

Question

我想从文件中的变量（元）接收值 form.js 这个：

export const TextInput = ({ icon, ...props }) => {
  const [field, meta] = useField(props);
  const [showpass, setShowpass] = useState(false);
  const [showPopup, setShowPopup] = useState(false);
    {'....'}

我想将其发送到文件 login.js

// styled components
import {
  StyledTextInput,
  StyledFormArea,
  StyledFormButton,
  StyledLabel,
  Avatar,
  StyledTitle,
  colors,
  ButtonGroup,
  ExtraText,
  TextLink,
  CopyrightText,
  ErrorMsg
} from "../components/Styles";

import Logo from "./../assets/logo.png";

// formik
import { Formik, Form,useField } from "formik";
import  {TextInput} from "../components/FormLib";
import * as Yup from "yup";

//icons
import { FiMail, FiLock } from "react-icons/fi";
// Loader
import Loader from "react-loader-spinner";
// auth & redux
import { connect } from "react-redux";
import { loginUser } from "../auth/actions/userActions";
import { useHistory } from "react-router-dom";
import AuthCode from 'react-auth-code-input';
import React, { useState } from 'react';

//pop up style.css 
import '../assets/css/popup.css'
// Import popup lib
import Popup from "reactjs-popup";
import 'reactjs-popup/dist/index.css';



const Login = ({ loginUser}) => {
  const history = useHistory();
  const [showPopup, setShowPopup] = useState(false);
  {......}

我知道这可能是一个初学者问题，但我无法弄清楚如何通过文件发送此变量，现在感谢您的支持我想检查变量的登录文件的某些部分

  useEffect(() => {
    if(meta.error === 'codigo 2 fatores incorreto'){
    setShowPopup(true);
    }
  }, [meta.error])

如您所见，我想处理页面登录中的弹出窗口，但我需要获取元变量才能执行此操作

Answer 1

您可以创建 onMetaChange 属性然后使用 useEffect 挂钩在元数据更改时将元数据传递到登录表单

喜欢下面

export const TextInput = ({onMetaChange, ...props}) => {
    const [field, meta] = useField()
    
    ...
   
    useEffect(() => {
        onMetaChange && onMetaChange(meta);
    }, [meta]) 

    ...
}

另请注意，这不是执行此操作的最佳做法，您可以检查您正在使用的库中的代码示例，找出最佳做法和最佳风格

React js导出一个变量

React js export a variable

reactjs

formik