是否可以使用在导入的 .js 文件中定义的组件？

Question

使用 styled-components，如果您在导入文件中定义了 Title：

//comp.js

const Title = styled.h1`
   color: red;
`;

是否可以使用 Title 而不必在 index.js 中定义 Title？例如，

//index.js

import "./components.js";

render(
   <Title>Text here</Title>,
   document.getElementById("root")
);

我不确定这是否可行，也没有找到解决方法，我可能无法思考解决方案。在这个例子中，Title 会是 re-used 很多次，所以，如果我有 pre-defined 一组多个组件，我有点想避免必须定义每个组件（标题、按钮、字段等）在 index.js 中，因为它已经在其他地方定义了。

希望这是有道理的。

谢谢！

Answer 1

组件是用来重复使用的。你基本上可以导出一个组件，让它默认导出或命名导出，然后在另一个文件中相应地导入它，然后在那里使用它。

示例，

File 1

export default someComponent;

File 2

import SomeComponent from 'path to file 1';

or

File 1

export someComponent;

File 2

import {someComponent} from 'path to file 1'

您可以阅读更多关于 export/import 。

我想你也可以这样试试，

import * as SomeName from 'path';

然后，SomeName.Component

Answer 2

class Header extends PureComponent {

    render() {
        return (
            <div>
              Stuff
            </div>
        );
    }
}

export default Header;

然后

import Header from '../component';
<Header></Header>

是否可以使用在导入的 .js 文件中定义的组件？

Is it possible to use a component that was defined in an imported .js file?

reactjs

react-native

styled-components