导入导出样式的组件reactjs

Question

我想在样式和应用之间划分页面

示例

在页面样式.js 中

import styled from "styled-components";
//i dont know how to export all const
export const Container = styled.div`
display: flex;
flex-direction: row;
`;
export const Sidebar = styled.div`
width: 20%;
height: 100%;
background-color: #f9f9f9;
`;

和在页面app.js 中

import * as All from "./style.js"
//i dont know, how to import all const in style.js

function App(){
return(
<Container>
<Sidebar>
</Sidebar>
</Container>
)}

当style.js中的const太多时，如何导出和导入所有const？

Answer 1

您可以这样导出的另一个选项：

import styled from "styled-components";
const Container = styled.div`
display: flex;
flex-direction: row;
`;
const Sidebar = styled.div`
width: 20%;
height: 100%;
background-color: #f9f9f9;
`;

export {Container,Sidebar}

你可以这样导入：

import { Container,Sidebar } from './style';

function App() {
return (
<Container>
<Sidebar>
</Sidebar>
</Container>
);
}

Answer 2

有一种很好的方法可以做到这一点。这种方式还可以让您知道哪个组件是样式组件还是单个组件。

// style.js
export const Styled = {
Container: styled.div`
display: flex;
flex-direction: row;
`,

Sidebar: styled.div`
width: 20%;
height: 100%;
background-color: #f9f9f9;
`,
}
import { Styled } from './style';

function App() {
return (
<Styled.Container>
<Styled.Sidebar>
</Styled.Sidebar>
</Styled.Container>
);
}

Answer 3

Dae Hyeon Mun的方法很好，但您可以进一步简化它，并避免使用通配符导入来重构styles.js文件，这本质上是创建一个模块对象，因此您不必！：

// style.js
export const Container = styled.div`
...
`;
export const Sidebar = styled.div`
...
`;

// app.js
import * as Styled from './style';
function App() {
return (
<Styled.Container>
<Styled.Sidebar>
</Styled.Sidebar>
</Styled.Container>
);
}

更多详细信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#creating_a_module_object

Answer 4

您可以使用；导出常量"；就像你在出口方面所做的那样。导入这些常量的最简单方法是：

import * as styled from "./style.js"
//this will import all 'export const' containing 'styled' from "./style.js"

function App(){
return(
<Container>
<Sidebar>
</Sidebar>
</Container>
)}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>