将道具传递给反应中的函数

Question

你好 StackExchange 社区。

我刚开始反应并且在调用从另一个文件导出的函数时遇到了一些困难：

当我尝试从表单调用此函数时，我收到错误消息：

Attempted import error: 'PrivateRoute' is not exported from '../components/PrivateRoute'.

组件：

import React from "react";
import { Route, Redirect } from "react-router-dom";

function PrivateRoute({ component: Component, ...rest }) {

  return (
    <Route
      {...rest}
      render={props =>
        true ? (
          <Component {...props} />
        ) : (
            <Redirect
            to={{ pathname: "/", state: { referer: props.location } }}
          />
        )
      }
    />
  );
}

export default PrivateRoute;

我试图从以下位置调用它的文件：

import React, {useState} from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Box from "@material-ui/core/Box";
import { PrivateRoute } from "../components/PrivateRoute";

const useStyles = makeStyles((theme) => ({
  paper: {
    width: 471,
    height: 467,
    padding: "38px 40px",
    fontFamily: "Avenir Next",
    fontSize: 32,
    textAlign: "center",
    color: "#000000",
    display: "flex",
    flexDirection: "column",
  },
  bottomBar: {
    width: "100%",
    position: "absolute",
    bottom: "0",
    display: "flex",
    flexDirection: "row",
    padding: "0 15px",
  },
  bottomLeft: {
    display: "flex",
    padding: "15px",
  },
  bottomRight: {
    marginLeft: "auto",
    padding: "15px",
  },
  p: {

  },
  space: {
    width: "30px",
  },
  smallText: {
    fontSize: "16px",
    fontWeight: "300",
  },
  input: {
    width: "100%",
    padding: "10px",
  },
  form: {
    marginTop: "10%",
    height: "70%",
    position: "relative",
  },
  button: {
    width: "100%",
    padding: "10px",
    position: "absolute",
    left: "0",
    bottom: "0",
  },
  password: {
    fontSize: "12px",
    textAlign: "right",
    fontWeight: "600",
  },
}));


const Login = () => {
  const classes = useStyles();
  return (
    <div style={{height: "calc(100% - 60px)", display: "flex", alignItems: "center", justifyContent: "center"}}>
      <Paper className={classes.paper}>
        <Box>Agents of Radical</Box>
        <Box className={classes.smallText}>Portal Sign In</Box>
          <form className={classes.form} onSubmit={PrivateRoute()}>
            <input type="text" name="Email" placeholder="Email Address" className={classes.input}/>
            <input type="text" name="Password" placeholder="Password" className={classes.input}/>
            <p className={classes.password}>Forgot Password?</p>
            <input type="submit" value="Submit"  className={classes.button}/>
        </form>
      </Paper>
      <Box className={classes.bottomBar}>
        <div className={classes.bottomLeft}>
          <p className={classes.p}>Privacy</p>
          <div className={classes.space}></div>
          <p className={classes.p}>Terms</p>
        </div>
        <div className={classes.bottomRight}>
          <p className={classes.p}>Help</p>
        </div>
      </Box>
    </div>
  );
};

export default Login;

我是否错误地导出了这个函数？ 将道具传递给此函数以使其有趣的正确方法是什么？

我试图通过在我的表单中使用 onSubmit 来调用该函数。

任何帮助/指导表示赞赏。

Answer 1

您正在执行默认导出，因此请按以下方式导入

import PrivateRoute from "../components/PrivateRoute";

Answer 2

笔记; 我们有两种在 javascript 中导出函数或类/构造函数的方法：

1. 默认情况下，这是您为 privateRoute 所做的，例如：

导出默认函数或类名

2. 作为模块部分（那么你不要使用默认这个词）例如：export const functionOrClassName

---如果您还想将两个或更多功能导出为默认值（可能是一组 utils 函数），则可以在最底部执行此操作：export default{ functionA, functionB, .... }

---如果您还想导出两个或更多模块部分而不是默认的，那么您可以根据模块所在的位置执行此操作，然后可以在另一个文件中并从另一个名为“globalTypesExport”的文件中导出：export {functionA,functionB,...} 来自“../..”

如何导入不同的导出类型

1. 要导入默认值，您只需执行以下操作： import functionName from '...'

2. 要导入模块部分，您只需执行以下操作： import {functionName} from '....

欢迎反应😉