用CSHTML渲染转换的ES6
用CSHTML渲染转换的ES6
提问于 2017-01-29 07:15:05
我有过
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) {
...
}
...看来一切都很好。
现在，我想在我的ShoppingList文件中呈现_Layout.cshtml。
问:我该怎么做？我已经尝试了下面的所有方法，并且一直得到关于无效参数类型的反应错误，或者传入错误的元素，或者什么的。我的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>，它似乎错了我。
谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-01-29 08:53:58
您应该在您的输入文件中包含以下内容：
import ShoppingList from 'path-to/ShoppingList';
ReactDOM.render(<ShoppingList />, document.getElementById("content1"));在CSHTML页面中，不需要附加的脚本标记。
您的原始示例不起作用，因为：
- ShoppingList并不是全局公开的(导出作为默认值并不使它成为全局的)。
- 在
<ShoppingList />页面中使用JSX语法(JSX)之前，需要对其进行转置。
如果确实需要在CSHTML页面中使用组件，则可以将组件设置为全局的：
window.ShoppingList = ShoppingList在定义组件的文件中。
并使用代替JSX语法：
ReactDOM.render(React.createElement(ShoppingList), document.getElementById("content1"))页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41918525
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号