如何在Vanilla JS中加载React组件

我有一个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  

我做错了什么?

谢谢大家。

评论