reactjs - 如何覆盖另一个模块中的组件？

Question

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

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

例如:我们在核心代码库中有一个对话框，其中有 3 个字段需要填写。一位客户需要多一个字段，其他都一样。

所以我有两个问题:

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

<强>2。继承组件时，是否可以只覆盖父模板的部分内容？

谢谢

Answer 1

How can I override the components used in the core module?

模块不能单独通过 JavaScript 来覆盖。这可以在构建步骤中通过引入模块别名来修复，例如与 Webpack 。原始组件模块应该是覆盖组件模块的别名。

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

为了使用 JavaScript 覆盖特定组件，应重构应用程序以以某种方式利用依赖项注入(inject)模式。可以通过上下文 API 或 Redux 存储为整个应用程序提供依赖注入(inject)容器。例如。可以选择向应用程序提供上下文以覆盖那些预期被覆盖的组件:

const DepContext = React.createContext({});

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

依赖于该组件的组件会收到覆盖的或原始的组件:

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

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

When inheriting a component, is it possible to only override part of the parent template?

没有好的方法可以做到这一点，继承的组件应该复制并粘贴布局:

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

对于细粒度组件来说，这不应该是问题，可以用最少的努力来重新组合render:

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

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