Question

我想使用React构建一个可被非SPA网站使用的小部件，方法是指向一个js文件并添加一个javascript代码段。例如

CMake Error: The source directory "C:/Program Files (x86)/IntelSWTools/openvino_2019.1.148/opencv/samples/..." does not appear to contain CMakeLists.txt.

我已经用React和setup webpack创建了一个组件。我大多数情况下，顶级组件都以

结尾

<script src="somepath/mycomponent.min.js"></script>
<script>MyComponent.render('id-of-a-div')</script>

我的组件将无法执行此操作，因为它不知道向哪个元素进行呈现。

如何以及在何处创建将组件附加到元素的函数？

Answer 1

您需要一个带有初始化方法并与父页面进行交互的方法的文件。

也许在Utility.js中

 export const utilities = {
   // Here you will initialize the widget and you could pass an argument 
  // with the id of the tag where you wanna inject the app 

   initWidget: ( elementId ) => {
    if( !elementId ){
     document.createElement( 'rootApp' ); 
     ReactDOM.render(<MyComponent/>, document.getElementById('rootApp'));
    }
    else {
     ReactDOM.render(<MyComponent/>, document.getElementById(id));
     }
   },
 }

该实用程序将在html的标记中工作，以便在加载所有js后立即对其进行初始化：

<script type='text/javascript' src='/widget.js'></script>
<script>
 utilities.initWidget( 'myCustomId' );
</script>

也许这样的流程对您可能有用。

如何使用React创建可重新分发的小部件

1 个答案: