单个模块中的多个 React 组件

Question

我是整个 browserify 的新手。我一直在尝试使用 browserify + reactify + gulp 来转换、缩小和组合 React 应用程序。只要我有一个 React.createClass 和一个 module.exports = MyComponent 一切正常。由于我有几个共享组件，我物理上托管在同一个文件中并跨项目重用，所以我想导出多个组件。我试过一个数组：

module.exports = [Component1, Component2]

并且还尝试了具有多个属性的对象：

module.exports = {Comp1: Componenet1, Comp2: Component2} 并且还尝试在对象中内联对 createClass 的调用，但这没有帮助。

有没有办法做到这一点，或者我是否必须将每个组件拆分成一个单独的 JSX 文件？

Answer 1

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

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

然后在使用它们的地方做

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

Answer 2

我将函数用于 return 组件。

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

然后

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

Answer 3

您可以这样做，将 index.js 文件放入您的 /components/ 文件夹

/components/index.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 不会猜到的！ ^^

Answer 4

您可以简单地将多个组件导出为数组：

module.exports = [Component1, Component2]

然后使用组件：

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

Answer 5

定义函数

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/

Answer 6

以下对我有用。

在单个文件中，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;

Answer 7

我是新手，我也遇到过这种情况。这就是我克服它的方法。

除了这个问题，它还回答了以下错误：

导出 'default'（导入为 'db'）在“./index.js”（可能的导出：auth、db）中找不到。

第一种方法 - 使用默认导出并且在导入时不要解构

index.js

const db = // module 1;
const auth = // module 2;

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

正在导入其他文件

import db from "./index.js"

第二种方法 - 在导入时使用导出和解构

index.js

const db = // module 1;
const auth = // module 2;

export { db, auth};

并且在导入时

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

请注意在使用 import 语句时何时使用解构

单个模块中的多个 React 组件

Multiple React components in a single module

reactjs

gulp

browserify

/components/index.js

导入