重用 React 组件和模块导出答案

【问题标题】：Reuse React components and module exports重用 React 组件和模块导出
【发布时间】：2020-08-03 18:22:57
【问题描述】：

我有一个项目 A（见下文），我使用“yarn build”构建这个项目并生成 main.js 文件。我想将此 main.js 文件用作另一个反应项目 B 的依赖项。（我关注：React components and module exports）但它不起作用。这是正确的方法吗？您能提供一些建议吗？

项目A：

index.tsx

import { Home } from "./view/Home";

module.exports ={
    Home: Home
}

home.tsx

import * as React from "react";
import "../css/view/Home.css";
import { Background } from "../component/Background";
import { CL } from "../component/C";
import { DL } from "../component/D";


type Props = {
    P: number;
    Q: Array<string>;
    R: number;
    S: number;
    T: number;
    U: number;
}

export class Home extends React.Component<Props, any> {
    render() {
        return (
            <div className="home">
                <Background P={this.props.P}
                            Q={this.props.Q}/>
                <CL R={this.props.R}
                    S={this.props.S}/>
                <DL T={this.props.T}
                    U={this.props.U}/>
            </div>
        );
    }
}

项目 B

import React from "react";
import './App.css';
import imagesPath from "./data/imagesPath.json";

var Home = require('./main.js').Home;

const transitionSettings = {
    P: 8000,
    Q: imagesPath,
    R: 55,
    S: 28,
    T: 5000,
    U: 23
}

function App() {
  return (
      <Home {...transitionSettings} />
  );
}

export default App;

【问题讨论】：

标签： javascript reactjs typescript frontend

【解决方案1】：

除非您有特定的理由混合 commonjs 和 ES6 模块，否则最好坚持使用一种声明模块的方式。在 ES6 模块中，您可以将不同文件中的项目重新导出到使用 export { Thing } from "./Thing" 语法声明的位置。

项目A：index.tsx

export { Home } from "./view/Home";

然后在项目B中：

import { Home } from "./index"; // ES6 import

const transitionSettings = { ... }

function App() {
  return (
      <Home {...transitionSettings} />
  );
}

export default App;

【讨论】：

感谢您的回复。我需要“构建并提供 main.js 文件给项目 B。我不能直接使用 Home.js。
你在 main.js 中有什么
你能解释一下main.js 的来源吗？您从项目 A 中向我们展示的只有 home.tsx 和 index.tsx。假设index.tsx 被内置到main.js 中，那么您应该能够从main.js 导入组件。除非我们缺少某些东西。

【解决方案2】：

在您的Project B 中，您可以通过添加这行代码直接导入Home 类。

import { Home } from "./view/Home";

只需确保为包含 Home 类的文件放置正确的路径即可。

【讨论】：

感谢您的回复。我需要“构建并提供 main.js 文件给项目 B。我不能直接使用 Home.js。