Question

如果在导入的文件中定义了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将被重复使用很多次，因此，如果我具有一组预定义的多个组件，我有点想避免必须在其中定义每个组件（标题，按钮，字段等） index.js，因为它已经在其他地方定义了。

希望这很有道理。

谢谢！

Answer 1

组件应被重用。您基本上可以导出一个组件，将其设置为默认导出或命名为export，然后将其相应地导入另一个文件中，然后在其中使用。

示例

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'

您可以阅读有关导出/导入here的更多信息。

我认为您也可以尝试这种方式

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文件中定义的组件？

2 个答案: