Reactjs 反应来自其他的超越组件；模块"；

我想基于同一个代码库创建多个应用程序。所有的网站都几乎相同，但其中一些可能有一些额外的/不同的逻辑/模板

实际上，我们在项目中使用JavaEE/JSF，但我想迁移到另一个“前沿”框架。我的目标是用react 目前，我们有1个项目，称为产品，对于所有客户，我们有“项目”，可以覆盖核心“产品”

例如： 我们在核心代码库中有一个对话框，其中有3个字段需要填充。一个客户还需要一个字段，但其他字段都一样

所以我有两个问题：

1。如何覆盖核心模块中使用的组件？

2。继承组件时，是否只能覆盖父模板的一部分？

谢谢

如何覆盖核心模块中使用的组件

模块不能仅通过JavaScript重写。这可以在构建步骤通过引入模块别名来解决，例如使用。原始组件模块应为替代组件模块的别名

这可以被认为是一个临时措施，因为它对开发人员来说是不明显的，需要额外的配置，并且随着时间的推移可能会变得复杂

为了用JavaScript覆盖特定组件，应用程序应该进行重构，以某种方式使用依赖注入模式。可以通过上下文API或Redux存储为整个应用程序提供依赖项注入容器。例如，可以选择性地向应用程序提供上下文，以覆盖预期要覆盖的组件：

const DepContext = React.createContext({});

const MyApp = props => (
  <DepContext.Provider value={{Foo: MyFoo}}>...</DepContext.Provider>
);

请提供。如果不查看实际代码，问题就无法解决。应用程序可能应该进行重构，以引入某种形式的DI或条件呈现。

import OriginalFoo from '../components/foo';

const Bar = props => (
  <DepContext.Consumer>
    {({ Foo = OriginalFoo }) => (
      <Foo/>
    )}
  </DepContext.Consumer>
);

class Foo extends Component {
  render() {
    return (
      <div>
        Some layout
        <div>Nested layout</div>
      </div>
    );
  }
}

class Foo extends Component {
  render() {
    return (
      <SomeFooLayout>
        <NestedFooLayout/>
      </SomeFooLayout>
    );
  }
}

class MyFoo extends Foo {
  render() {
    return (
      <SomeFooLayout>
        <NestedFooLayout/>
        <MoreNestedFooLayout/>
      </SomeFooLayout>
    );
  }
}