替换Webpack捆绑包中的组件

Question

我们有一个Webpack包公开了React组件。 公开的组件包含同一捆绑包中的嵌套组件。 我们希望允许用户用自己的特定版本替换组件。

例如，以下组件结构；

class A extends React.Component {
    render() {
        return (
            <B/>
        );
    }
}

const C = require('./C');

class B extends React.Component {
    render() {
        return (
            <C/>
        );
    }
}

Webpack捆绑包中从中公开顶级组件A：

const A = bundle.components.A;

我们的服务器端Web框架依赖于公开的bundle接口来调用React组件。

通过这种结构，一个示例用例将是从组件A替换嵌套的组件C。

我们为此看到的当前选择是：

• 向类B（和A）添加一个方法来替换组件C
• 创建注册机制，例如通过使用C的文件名或逻辑名，以及捆绑包的通用方法来替换组件。 例如： bundle.component.replace('./C', './custom-C');
• ...

替换Webpack捆绑包中（嵌套的）React组件的最佳方法（即通常的做法）是什么？

Answer 1

Joost，我遇到了同样的问题，而我一直在处理的方式是创建一个决定应该发生哪个组件的Block组件。

这是一个正在工作的项目，用于导入Webpack捆绑包并确定应进行的打包。 如果它们在模板作用域中定义，则切换render方法。

https://github.com/wallynm/react-template-system

Answer 2

最后，我们选择使用render-props，HOC，并为特定组件添加一些替换功能。