javascript - 如何将 react 组件呈现给另一个网络应用程序

Question

我有一个基于 react.js 的网络应用程序!有很多组件!所以我想给其他网站一些服务!

其他网站应该包含来 self 的 webapp 的 js 文件!例如:

<script type="text/javascript" src="https://mywebsite/script.js"></script>
//here am calling buttons from my js file
<script type="text/javascript">
    buttons.render("root");
</script>

我的基于 React 构建的应用程序应该呈现按钮!

在普通的js中会是这样的

class buttons{
  constructor() {

  }
  render (id){
    document.getElementById(id).innerHTML = "here is buttons";
  }
}

buttons= new buttons();

但我不知道我应该如何在 react 中做到这一点，我想用 react 来做，因为我有一些逻辑要做!

Answer 1

您可以利用 ReactDOM.render 并将其公开为组件的全局 API。

ReactDOM.render 会在接收到新的 props 时重新渲染组件这一事实在这方面大有帮助。

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

然后您的消费者可以使用此 API 来安装或更新和卸载组件

我写了更多关于这个的细节on my blog ，希望对您有所帮助。