在CSHTML中渲染转译的ES6

Question

我有

Tutorial.jsx

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

export default ShoppingList;

webpack.config.js

module.exports = {
    ...
    output: './React/bundle.js',
    ...,
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                query: {                        
                    presets: ['es2015', 'react'],
                }
            }
        ]
    }
}

在我的CMD提示符下，当我运行webpack -w所有内容均为绿色，并且在React文件夹中看到我的bundle.js文件出现在应有的位置。 打开它，我看到了

...
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>

有人可以让我知道是否

1. JSX文件中可能没有ReactDOM.render（），
2. 可以做我想做的事情，即在CSHTML中呈现我的ShoppingList

到目前为止，我得到的最好结果是在DOM资源管理器中看到ShoppingList，但实际上没有呈现HTML。 出来了<shoppinglist ...></shoppinglist> ，这对我来说似乎是错误的。

谢谢。

Answer 1

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

import ShoppingList from 'path-to/ShoppingList';

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

在CSHTML页面中，不需要其他脚本标签。

---

您的原始示例无效，因为：

1. ShoppingList不会全局公开（默认导出不会使其全局）。
2. 必须先转换JSX语法（ <ShoppingList /> ），然后才能在HTML页面中使用。

如果确实需要在CSHTML页面中使用组件，则可以使该组件成为全局组件：

window.ShoppingList = ShoppingList

在定义组件的文件中。

并使用香草javascript而不是JSX语法：

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