如何将不同文件中的一个函数导入另一个函数？

Posted 2023-03-21

【中文标题】如何将不同文件中的一个函数导入另一个函数？

【英文标题】：How to import just one function from different file into other?

【发布时间】：2021-02-06 16:02:21

【问题描述】：

我有一个布局文件，我在其中制作了页脚和导航，并将这两个函数插入到 Layout const 中（代码如下）。在新文件中，我只需要导航功能，那么如何在没有页脚的情况下插入它？因为当我在我的新文件中写入时，从“../components/layout”导入导航并且在代码插入中出现错误...

const Layout = ( children ) => return (
<div>
  <Navigation></Navigation>
  <Global
    styles=
      html: 
        backgroundColor: "#fff",
        color: "#111",
        fontFamily: `'Poppins', sans-serif`,
        fontSize: 14,
        [Screen.S]: 
          fontSize: 16,
        ,
        [Screen.M]: 
          fontSize: 18,
        ,
        [Screen.L]: 
          fontSize: 20,
        ,
      ,
      a: 
        color: "unset",
      ,
    
  />
  children
  <Footer></Footer>
</div>

)

function Navigation()  const [navbarOpen, setNavbarOpen] = useState(false) return (
<header
  css=
    width: "100%",
    maxWidth: "100%",
    padding: "0 24px",
    position: "fixed",
    background: "#fff",
    boxShadow: "0 0 0.35rem rgba(0,0,0,.25)",
    zIndex: "100",
    top: 0,
  
>
  <div
    css=
      gridAutoFlow: "column",
      minHeight: "4.5rem",
      display: "grid",
      maxWidth: 1200,
      margin: "0 auto",
      gridTemplateColumns: "auto 1fr",
      alignItems: "center",
      paddingLeft: 35,
    >
    <Link to="/ ">
      <img style= height: "2.5rem"  src=logo/>
    </Link>

    <Toggle
      navbarOpen=navbarOpen
      onClick=() => setNavbarOpen(!navbarOpen)

    >
      navbarOpen ? <Hamburger open /> : <Hamburger />
    </Toggle>
    navbarOpen ? (
      <NavBoxIcons>
        <NavbarSocialLinks />
      </NavBoxIcons>

    ) : (
        <NavBox open>
          <div>
            <HeaderLink>About</HeaderLink>
            <HeaderLink>Blog</HeaderLink>
          </div>
          <div>
            <NavbarLinks />
          </div>
        </NavBox>
      )
    
  </div>
</header >

)

function Footer()  return (
<footer
  css=
    padding: "6rem 2rem",
    fontSize: "1rem",
    minHeight: 160,
    fontFamily: "sans-serif",
    ...Css.container,
  
>
  <div
    css=
      display: "flex",
      flexDirection: "column",
      marginBottom: "3.6rem",
    
  >
    <div
      css=
        fontSize: "1.2rem",
        display: "grid",
        gridGap: "0.8rem",
      >
      <a>
        <span>Privacy police</span>
      </a>
    </div>
  </div>
  <div
    css=
      display: "grid",
      gridTemplateColumns: "1fr auto",
      alignItems: "center",
      fontWeight: "lighter",
    >
    <div css= display: "flex", flexDirection: "column" >
      <span>My Page</span>
    </div>
  </div>
</footer>

)

【参考方案1】：

尝试像这样导出导航和页脚

//at bottom of file
export Navigation, Footer

像这样导入单个组件

import Navigation from 'components/layout'
or
import Navigation,Footer from 'components/layout'

查找exporting in js