V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sphawkcn
V2EX  ›  React

为什么在 JavaScript 的类里面连申明变量都不行?

  •  
  •   sphawkcn · 2016-08-05 21:52:58 +08:00 · 2466 次点击
    这是一个创建于 2792 天前的主题,其中的信息可能已经有所发展或是发生改变。

    正在看这篇教程: https://www.meteor.com/tutorials/react/components

    在 2.4 的 imports/ui/App.jsx 文件里面,有这么一个函数:

    getTasks() {
        return [
          { _id: 1, text: 'This is task 1' },
          { _id: 2, text: 'This is task 2' },
          { _id: 3, text: 'This is task 3' },
        ];
    }
    

    这个简单函数的作用仅仅只是返回一个数组,于是我就想 [为什么不直接定义一个数组呢] ?像范例这样定义一个函数,再让这个函数返回一个数组,这不是脱裤子放屁吗?你不就想要一个数组吗?于是我就直接在这个函数的上面定义一个 tasksList 数组:

    let tasksList = [
        { _id: 1, text: 'This is task 1' },
        { _id: 2, text: 'This is task 2' },
        { _id: 3, text: 'This is task 3' },
        ];
    

    这么定义之后, Meteor 就报错了(其他代码都没动)。这是为什么呢?我知道我定义的数组下面没有用到,但是没用到也不至于就报错吧,求指点。

    Meteor 报错信息如下:

    While building for web.brower:
    imports/ui/App.jsx:8:6 Unexpected token (8:6)
    
    => Your application has errors. Waiting for file change.
    
    7 条回复    2016-08-06 00:09:52 +08:00
    bdbai
        1
    bdbai  
       2016-08-05 22:30:25 +08:00 via Android   ❤️ 1
    这个所谓的"class"只是 ES6 提供的语法糖,和其它语言的“类”并不一样。
    如果仅仅为了演示,可以把你改的语句放进 renderTasks 方法中作局部变量。

    也可以先在构造函数中借 this 放数据:
    constructor(props, context) {
    ->super(props, context);

    ->this.tasksList = [ ...... ]
    }
    然后在 renderTasks 中读取 this.tasksList 来操作。
    sphawkcn
        2
    sphawkcn  
    OP
       2016-08-05 22:42:27 +08:00
    @bdbai 大神, ES6 的所谓"class"里面只能放方法吗?
    bdbai
        3
    bdbai  
       2016-08-05 23:50:07 +08:00 via Android   ❤️ 1
    @sphawkcn 变量、常量暂时不能放,方法、属性访问器可以有。从 ES5 的角度看,不用 this 而直接定义变量也不好弄啊。
    往后 React 玩起来,你还可以用 state 来存数据,更不用操心这个问题了。
    huihuimoe
        4
    huihuimoe  
       2016-08-06 00:04:58 +08:00 via Android   ❤️ 2
    let var 的話是肯定不可以在 class 內用的了,如果想定義變量的話可以在 babel 加上這個插件
    https://babeljs.io/docs/plugins/transform-class-properties/
    然後就可以用
    tasksList = [
    { _id: 1, text: 'This is task 1' },
    { _id: 2, text: 'This is task 2' },
    { _id: 3, text: 'This is task 3' },
    ];
    或者
    static tasksList = [
    { _id: 1, text: 'This is task 1' },
    { _id: 2, text: 'This is task 2' },
    { _id: 3, text: 'This is task 3' },
    ];
    來定義(^_-)-☆
    sphawkcn
        5
    sphawkcn  
    OP
       2016-08-06 00:05:10 +08:00
    @bdbai 嗯,我明白了,非常感谢你的指点,谢谢。
    sphawkcn
        6
    sphawkcn  
    OP
       2016-08-06 00:08:21 +08:00
    @huihuimoe 嗯,谢谢,这个看起来又更复杂了。
    kfll
        7
    kfll  
       2016-08-06 00:09:52 +08:00 via iPhone   ❤️ 1
    js 数组变量传递的时候传址。每次想要稳定地得到同个字面量描述的数组的方法就是写个函数返回这个数组字面量
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3028 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 14:52 · PVG 22:52 · LAX 07:52 · JFK 10:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.