当前位置：文江博客话题详情

JavaScript ES5 React.js ecmascript-6

react es5混合es6的问题

发布于 2022-09-04 08:02:23 字数 1119 浏览 10 评论 0

var React=require('react'),
ReactDom=require('react-dom'),
Header=require('../component/header.js'),
DirectSelect=require('../component/directSelect.js');

import Footer from './../component/Footer.js';//es6引入组件

var DreamDirectTeacher;
DreamDirectTeacher=React.createClass({
    render:function(){
        return (
            <div>
                <Header courseCon={'梦想导师'}/>
                <DirectSelect />
                <Footer></Footer>//载入组件
            </div>
        )
    }
});

module.exports=DreamDirectTeacher;

上面是我写的组件，开始时我是用es5写的，现在我刚开始试着用es6写，这里用了es6的import方法导入组件，但是没报错也没任何效果，不知道是我代码写错了还是不能混合用，，求指教

下面是Footer组件的测试代码

import React,{Component} from 'react';
import {render} from 'react-dom';

export default class Footer extends Component{
static defaultProps = {
    data:'1'
};
constructor(props){
    super(props);
    console.log(props);
    this.state={
        checked: 'w'
    }
}
render(){
    return (
        <div>
            {this.state.checked}
        </div>
    );
}

}

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

冷月断魂刀 2022-09-11 08:02:23

import React,{Component} from 'react';
import {render} from 'react-dom';

export default class Footer extends Component{
    static defaultProps = {
        data:'1'
    };
    constructor(props){
        super(props);
        console.log(props);
        this.state={
            checked: 'w'
        }
    }
    render(){
        return (
            <div>
                {this.state.checked}
            </div>
        );
    }
}

render(<Footer />, document.getElementById('app'))

<!doctype html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>Hello world</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="assets/app.bundle.js"></script>
  </body>
</html>

昵称有卵用 2022-09-11 08:02:23

可以混合用但是你的配置项，在webpack里面是否设置了babel？

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

22 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

Gabu-gabumon

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

荔枝明

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

独守阴晴ぅ圆缺

文章 0 评论 0

¤→小豸慧

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文