Question

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

例如，以下组件结构;

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

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

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

从顶层组件A在Webpack包中公开：

const A = bundle.components.A;

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

从这个结构中，一个示例用例是从组件A替换嵌套组件C.

我们看到的当前选项是;

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

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

Answer 1

Joost，我遇到了同样的问题，我处理这个问题的方法是创建一个Block组件来决定应该发生什么组件。

这是一个有效的项目导入webpack包并决定应该进行哪一个。如果在模板范围中定义它们，我会切换渲染方法。

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

Answer 2

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

替换Webpack包中的组件

2 个答案: