问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

React组件无法渲染

头像
bbb111
    3767

    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的，两个页面构造几乎相同。

    reactjavascript
    阅读 4.9k
    2 个回答
    得票最新
    头像
    kuangcaibao
      24658
      ✓ 已被采纳

      html页面写错了

      图片描述

      遇到这种问题，直接浏览器打开，看看dom元素构成

      头像
      小柚子Pomelo
        21

        jsx文件里的

        var Ldentry  = React.createClass({
    render() {
        return <div>
                hello world!!!
        </div>
    }
});

        应该改成

        var Ldentry  = React.createClass({
    render : function() {
        return (<div>
                hello world!!!
        </div>)
    }
});

        你的写法应该是ES6的语法，但是ES6的语法应该是这样的

        class Ldentry  extends Component{
    render() {
        return <div>
                hello world!!!
        </div>
    }
};
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题