javascript - React组件无法渲染
本文介绍了javascript - React组件无法渲染的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
HTML文件
<!doctype html>
<html>
<head>
<title>
Test
</title>
</head>
<body>
<div id="ldentry"></div>
<script type=text/javascript src="build/Ldpage.js"></script>
</body>
</html>
JSX文件
import React from 'react';
import ReactDOM from 'react-dom';
var Ldentry = React.createClass({
render() {
return <div>
hello world!!!
</div>
}
});
ReactDOM.render(<Ldentry />, document.getElementById('ldentry'));Webpack config 文件
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
Ldproject: './ldproject.js'
Ldpage: './ldmain.js'
},
output: {
path: 'build',
filename: '[name].js'
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.json$/,
exclude: /node_modules/,
loader: "json-loader"
}
]
}
};
请大家帮忙看看问啥这段代码不能正确的render，另外一个Ldproject页面是可以正确render的，两个页面构造几乎相同。
解决方案
html页面写错了
遇到这种问题，直接浏览器打开，看看dom元素构成
这篇关于javascript - React组件无法渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
