在 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 一切都是绿色时，我看到我的 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>

有人可以告诉我

JSX 文件中可能没有 ReactDOM.render() 并且，
可以做我想做的事情，即在 CS 中呈现我的购物列表HTML

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

谢谢。

Answer 1

你的条目文件中应该有这个：

import ShoppingList from 'path-to/ShoppingList';

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

在 CSHTML 页面中不需要额外的脚本标记。

您的原始示例不起作用，因为：

ShoppingList 未在全局公开（导出为默认值不会使其成为全局）。
JSX 语法 (<ShoppingList />) 需要转译后才能在 HTML 页面中使用。

如果您确实需要在 CSHTML 页面中使用某个组件，您可以将该组件设为全局：

window.ShoppingList = ShoppingList

在定义组件的文件中。

并使用 vanilla javascript 而不是 JSX 语法：

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

在 CSHTML 中渲染转译的 ES6

Render Transpiled ES6 in CSHTML

javascript

jsx

reactjs