如何在Vanilla JS中加载React组件

由 发布于 javascriptreactjs
 收藏

我有一个React组件，我想将其动态添加到DIV中（id =“ myReactContainer”）。

myReactComponent.jsx

import React, { /**My STUFF IMPORTS **/ } from 'react'

const MyReactComponent = () => {
    return (<div>HELLO World</div>)
}

export default MyReactComponent;

index.html

<div id="myReactContainer"></div>

我尝试加载它，如下所示：

<script src="./myReactComponent.jsx"></script>  

var render = function(component, props, targetNode, callback) {
  var reactElement = React.createElement(component, props, null);
  ReactDOM.render(reactElement, targetNode, callback);
  return reactElement;
}  

var element = document.getElementById("myReactContainer");  

revSwitchData = render(MyReactComponent, null, element, () => {
    console.log('>>>>> CALL REACT');
});

但是，我得到了错误：

Uncaught ReferenceError: MyReactComponent is not defined

我做错了什么？

谢谢大家。

评论