Javascript 在CSHTML中呈现传输的ES6

我有

Tutorial.jsx

class ShoppingList extends React.Component {
    render() {
        return (<div>Milk</div>);
    }
}

export default ShoppingList;

在我的CMD提示符中，当我运行

webpack-w

时，所有内容都是绿色的，我看到bundle.js文件出现在React文件夹中它应该出现的位置。打开它，我明白了

...
var ShoppingList = function (_React$Component) {
    ...
}
...

看来一切都好

现在我想在我的_Layout.cshtml文件中呈现ShoppingList

问题：我如何做到这一点？我已经尝试了下面的所有方法，并一直收到关于无效参数类型、或传入错误元素等的React错误。下面是我的CSHTML

<div id="content1">render here</div>
....
<script src="~/React/bundle.js"></script>
<script>
    ReactDOM.render("ShoppingList", document.getElementById("content1"));
    ReactDOM.render(ShoppingList, document.getElementById("content1"));
    ReactDOM.render(<ShoppingList />, document.getElementById("content1"));
</script>

在这里渲染
....
render（“ShoppingList”，document.getElementById（“content1”）；
render（ShoppingList，document.getElementById（“content1”）；
render（，document.getElementById（“content1”）；

有人能告诉我吗

JSX文件中可能没有ReactDOM.render（），并且

可以做我想做的事情，就是用CSHTML呈现我的购物清单

到目前为止，我得到的最好结果是在我的DOM资源管理器中查看ShoppingList，但实际上没有呈现HTML。它出来了

，这在我看来是错误的

---

谢谢。

您的输入文件中应该包含以下内容：

import ShoppingList from 'path-to/ShoppingList';

ReactDOM.render(<ShoppingList />, document.getElementById("content1"));

在定义组件的文件中

并使用普通javascript而不是JSX语法：

ReactDOM.render(React.createElement(ShoppingList), document.getElementById("content1"))

---

谢谢@lorefnon，这确实有效。但我仍然不明白的是，如果我在入口点文件（main.js）中调用ReactDOM.render，这意味着我只能有一个ShoppingList实例，不是吗？我想做的是，当我单击CSHTML页面中的按钮时，创建另一个购物列表。我遗漏了什么吗？如果您可以让React管理整个DOM，包括按钮以及包含ShoppingList的容器，那就更好了，但是如果这不可行，我已经用代码更新了我的答案，以从全局范围呈现React组件。非常感谢，答案是有意义的，而且很有效。我怀疑这是一个出口问题，这让我很难过，所以我尝试了网页包出口选项，但收效甚微。我从未尝试将ShoppingList添加到window对象。

window.ShoppingList = ShoppingList

ReactDOM.render(React.createElement(ShoppingList), document.getElementById("content1"))