Gulp 单个模块中的多个React组件

ddhy6vgd  于 2022-12-08  发布在  Gulp
关注(0)|答案(7)|浏览(156)

我对整个browserify是新手。我一直在尝试使用browserify + reactify + gulp来转换、缩小和合并一个React应用程序。只要我有一个React.createClass和一个module.exports = MyComponent,一切都工作得很好。因为我有几个共享组件,我物理地托管在同一个文件中,并在项目之间重用。我希望导出多个组件。我已尝试使用数组:
module.exports = [Component1, Component2]
并且还尝试了具有多个属性的对象:
module.exports = {Comp1: Componenet1, Comp2: Component2},并且也尝试在对象中内嵌createClass的呼叫,但没有任何帮助。
有没有办法做到这一点,或者我必须将每个组件拆分到一个单独的JSX文件中?

hiz5n14c

hiz5n14c1#

您只需将多个元件汇出为数组:

module.exports = [Component1, Component2]

然后使用组件:

var MyComponents = require('your/path/to/components');
var Component1 = MyComponents[0];
var Component2 = MyComponents[1];
bxgwgixi

bxgwgixi2#

你可以这样做,把一个index.js文件放到你的/components/文件夹中

/组件/索引. js

import Users from './Users/Users';
import User from './Users/User';

module.exports = {
  User,
  Users
}

汇入

import { Users, User } from './components';

正如你所看到的,我把我的文件命名为index.js,它阻止了我把它写进导入声明中。如果你想把你的文件命名为index.js之外的其他名称,你必须在导入中写上文件的名称,Node不会猜到它!^^

slsn1g29

slsn1g293#

我已将多个组件放在一个文件中,并按照您的建议导出对象。

module.exports = {
    comp1: Component1,
    comp2: Component2
}

那么它们在哪里使用呢

var comp1 = require('your/path/to/components').comp1;
var comp2 = require('your/path/to/components').comp2;
ioekq8ef

ioekq8ef4#

定义函数

function sum(a, b) {
  return a + b
}
function sub(a, b) {
  return a - b
}
function mul(a, b) {
  return a * b
}

定义导出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/

c6ubokkw

c6ubokkw5#

我是新来的,我也面对过这种情况,这就是我克服它的方法。
除此问题外,它还回答了以下错误:

  • 在'./index.js'中找不到汇出'default'(汇入为'db')(可能的汇出:验证、数据库)。*
  • 第一种方法 * -使用导出默认值,导入时不破坏结构
    索引.js
const db = // module 1;
const auth = // module 2;

export default { db, auth}; // notice the default keyword here

导入其他文件时

import db from "./index.js"
  • 第二种方法 * -导入时使用导出和解构
    索引.js
const db = // module 1;
const auth = // module 2;

export { db, auth};

和导入时

import { db } from "./index.js"

请注意在使用import语句时何时使用反结构化

pn9klfpd

pn9klfpd6#

我使用函数返回组件。

module.exports = {
   comp1: function(){
     return Component1;
   }
 }

然后

var myCompontents = require('./components');
var comp1 = myComponents.comp1();
nfg76nw0

nfg76nw07#

以下内容对我很有效。
在单个文件MultipleComponents.js中,添加两个或更多组件,如下所示。

const ComponentA = () => <div>Component A works! </div>

const ComponentB = () => <div>Component B works! </div>

export {ComponentA, ComponentB} // Export this way without using default

现在,将这些组件导入到您希望的任何其他组件中,如下所示

import {ComponentA} from 'your/directory/MutlipleFiles;

相关问题