Повторно использовать компоненты React и экспорт модулей

Question

У меня есть проект A (см. Ниже), я строю этот проект, используя «сборку пряжи», и он генерирует основной файл. js. Я хочу использовать этот основной. js файл в качестве зависимости для другого реагирующего проекта B. (Я следовал: Реагировать на компоненты и экспорт модулей ), но он не работает. Это правильный способ сделать это? Не могли бы вы дать какое-нибудь предложение?

Проект 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;

Answer 1

В вашем Project B вы можете импортировать класс Home напрямую, добавив эту строку кода.

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

Просто убедитесь, что вы указали правильный путь для вашего файла, который содержит Home класс.

Answer 2

Если у вас нет конкретной c причины смешивать общие js и ES6 модули, лучше придерживаться одного способа объявления модулей. А в модулях ES6 вы можете повторно экспортировать элементы в другой файл, туда, где он объявлен с синтаксисом export { Thing } from "./Thing".

Проект A: index.tsx

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

И затем в проект Б:

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

const transitionSettings = { ... }

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

export default App;