我对整个browserify是新手。我一直在尝试使用browserify + reactify + gulp来转换、缩小和合并一个React应用程序。只要我有一个React.createClass
和一个module.exports = MyComponent
,一切都工作得很好。因为我有几个共享组件,我物理地托管在同一个文件中,并在项目之间重用。我希望导出多个组件。我已尝试使用数组:module.exports = [Component1, Component2]
并且还尝试了具有多个属性的对象:module.exports = {Comp1: Componenet1, Comp2: Component2}
,并且也尝试在对象中内嵌createClass
的呼叫,但没有任何帮助。
有没有办法做到这一点,或者我必须将每个组件拆分到一个单独的JSX文件中?
7条答案
按热度按时间hiz5n14c1#
您只需将多个元件汇出为数组:
然后使用组件:
bxgwgixi2#
你可以这样做,把一个index.js文件放到你的
/components/
文件夹中/组件/索引. js
汇入
正如你所看到的,我把我的文件命名为index.js,它阻止了我把它写进导入声明中。如果你想把你的文件命名为index.js之外的其他名称,你必须在导入中写上文件的名称,Node不会猜到它!^^
slsn1g293#
我已将多个组件放在一个文件中,并按照您的建议导出对象。
那么它们在哪里使用呢
ioekq8ef4#
定义函数
定义导出
export { sum, sub, mul }
导入您需要的函数
import { sum, sub } from 'myfile'
或所有函数import * as myfunctions from 'myfile'
并调用为
sum(1+1)
或myfunctions.sum(1+1)
源代码:https://flaviocopes.com/how-to-export-multiple-functions-javascript/
c6ubokkw5#
我是新来的,我也面对过这种情况,这就是我克服它的方法。
除此问题外,它还回答了以下错误:
索引.js
导入其他文件时
索引.js
和导入时
请注意在使用import语句时何时使用反结构化
pn9klfpd6#
我使用函数返回组件。
然后
nfg76nw07#
以下内容对我很有效。
在单个文件
MultipleComponents.js
中,添加两个或更多组件,如下所示。现在,将这些组件导入到您希望的任何其他组件中,如下所示