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（），
我可以做我想要做的事情，即在CSHTML中呈现我的ShoppingList

我到目前为止获得的最佳结果是在我的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中渲染Transpiled ES6

1 个答案: