Question

我想知道是否可以用React编写小部件并将其作为CDN分发以将其集成到另一个应用程序react中吗？

这个想法：我有几个使用React编写的应用程序，我希望所有应用程序都共用一个标语，而不必在每个应用程序中都进行重写。目的是促进此横幅的更新。

我执行npm启动时，名为toolBar的小部件可以完美工作。

我已经构建了ToolBar，并将在文件夹build中生成的脚本添加到另一个名为myAppTest的应用程序中。

我的toolBar工作和另一个应用程序一起工作。但是，启动myAppTest时无法正确加载css和toolBar图像。

什么是最好的娱乐方式？

Answer 1

如果“将小部件与React应用程序集成”是指需要获取数据并将数据传递回另一个应用程序（在您的情况下为React应用程序）的独立React应用程序（您的小部件），那么它是完全可行的。
我什至posted an article with a tutorial也介绍了如何做到这一点。

基本上，要点是我们大多数人都知道每个react应用程序都有一个运行此行的入口点：

ReactDOM.render(<App/>, myContainer);

如火如荼的忘记方法。

但是实际上我们可以根据需要运行ReactDOM.render，它不会重新装入应用程序，而是会触发树的差异。

如果以前将React元素渲染到容器中，则会对其进行更新，并且仅在必要时对DOM进行更改以反映最新的React元素。

所以我们可以做的是将其包装在一个函数中并全局公开，以便页面上的其他代码可以运行它。

我使用的一种模式是接受具有该功能的道具，它将通过<App/>传递给ReactDOM.render。

例如：

window.CoolWidget = {
    mount: (props, container) => {
        ReactDOM.render(<CoolWidget {...props} />, container);
    },
    unmount: (container) => {
        ReactDOM.unmountComponentAtNode(container);
    }
}

小部件的使用者可以运行它：

window.CoolWidget.mount({widgetProp: someValue, onLogin: function(){...}}, myContainer)

这种方法最好的是，他们可以将这段代码转换为react组件（或者甚至您可以为他们做！）：

class CoolWidgetWrapper extends PureComponent {

    // create a ref so we can pass the element to mount and unmount
    widgetRef = React.createRef();

    componentDidMount() {
        // initial render with props
        window.CoolWidget.mount(this.props, this.widgetRef.current);
    }

    componentDidUpdate(prevProps) {
        if(prevProps !== this.props){
            window.CoolWidget.mount(this.props, this.widgetRef.current);
        }
    }

    componentWillUnmount(){
        window.CoolWidget.unmount(this.widgetRef.current);
    }

    render() {
        return <div ref={this.widgetRef}></div>
    }
}

这就是他们将如何使用它：

<CoolWidgetWrapper someProp={someValue} onLogin={someFunc} />

希望有帮助

如何创建带有React的小部件以集成到其他React App中？

1 个答案: