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

【问题标题】：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>

) }

【问题讨论】：

标签： reactjs layout navigation footer

【解决方案1】：

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

//at bottom of file
export {Navigation, Footer}

像这样导入单个组件

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

查找exporting in js

【讨论】：