我在ES6中编写了一个简单的组件(使用BabelJS),并且函数this.setState不起作用.

典型的错误包括

无法读取未定义的属性'setState'

要么

this.setState不是函数

你知道为什么吗？这是代码:

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

让我们说我有一个对象:

{
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
}

我想通过过滤上面的对象来创建另一个对象,所以我有类似的东西.

 {
    item1: { key: 'sdfd', value:'sdfd' },
    item3: { key: 'sdfd', value:'sdfd' }
 }

我正在寻找一种使用Es6实现这一目标的简洁方法,因此我可以使用扩展运算符.谢谢!

我有一个相对简单的问题,试图将内联脚本添加到React组件.到目前为止我所拥有的:

'use strict';

import '../../styles/pages/people.scss';

import React, { Component } from 'react';
import DocumentTitle from 'react-document-title';

import { prefix } from '../../core/util';

export default class extends Component {
    render() {
        return (
            <DocumentTitle title="People">
                <article className={[prefix('people'), prefix('people', 'index')].join(' ')}>
                    <h1 className="tk-brandon-grotesque">People</h1>

                    <script src="https://use.typekit.net/foobar.js"></script>
                    <script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script>
                </article>
            </DocumentTitle>
        );
    }
};

我也尝试过:

<script src="https://use.typekit.net/foobar.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

这两种方法似乎都没有执行所需的脚本.我猜这是一件我想念的简单事.有人可以帮忙吗？

PS:忽略foobar,我有一个真正的ID实际上在使用,我不想分享.

我们可以使用for-of循环访问数组元素:

for (const j of [1, 2, 3, 4, 5]) {
  console.log(j);
}

如何修改此代码以访问当前索引？我想使用for-of语法实现这一点,既不是forEach也不是for-in.

之前,巴贝尔会添加这条线module.exports = exports["default"].它不再这样做了.在我能做之前,这意味着什么:

var foo = require('./foo');
// use foo

现在我必须这样做:

var foo = require('./foo').default;
// use foo

这不是什么大不了的事(我猜它应该一直都是这样).问题是我有很多代码依赖于以前的工作方式(我可以将大部分代码转换为ES6导入,但不是全部转换).任何人都可以给我提示如何使旧的方式工作,而不必通过我的项目并解决这个问题(甚至一些关于如何编写codemod来做这个的说明将是非常光滑的).

谢谢!

例:

输入:

const foo = {}
export default foo

使用Babel输出5

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = {};
exports["default"] = foo;
module.exports = exports["default"];

使用Babel 6(和es2015插件)输出:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = {};
exports["default"] = foo;

请注意,输出的唯一区别是module.exports = exports["default"].

编辑

您可能对我在解决我的具体问题后写的博客文章感兴趣:误解ES6模块,升级Babel,眼泪和解决方案

我有一个函数,我试图转换为ES6中的新箭头语法.它是一个命名函数:

function sayHello(name) {
    console.log(name + ' says hello');
}

有没有办法给它一个没有var语句的名字:

var sayHello = (name) => {
    console.log(name + ' says hello');
}

显然,我只能在定义之后使用此功能.如下:

sayHello = (name) => {
        console.log(name + ' says hello');
    }

在ES6中有新的方法吗？

在js文件中,我使用import而不是require

import co from 'co';

并尝试直接由nodejs运行它,因为它说导入是'运输功能'并支持没有任何运行时标志(https://nodejs.org/en/docs/es6/),但我收到一个错误

import co from 'co';
^^^^^^

SyntaxError: Unexpected token import

然后我试着用巴贝尔

npm install -g babel-core
npm install -g babel-cli
npm install babel-core //install to babel locally, is it necessary?

并运行

babel-node js.js

仍有同样的错误,意外的令牌导入？

我怎么能摆脱它？

我还不熟悉ECMAScript 6.我刚刚克隆了React Starter Kit repo,它使用ES6作为应用程序代码.我很惊讶地发现linter 配置为禁止出现use strict指令,我认为这是在ES6之前的JavaScript中推荐的.那有什么意义呢？

我目前正在通过webpack/babel在React应用程序中使用ES6.我正在使用索引文件来收集模块的所有组件并将其导出.不幸的是,这看起来像这样:

import Comp1_ from './Comp1.jsx';
import Comp2_ from './Comp2.jsx';
import Comp3_ from './Comp3.jsx';

export const Comp1 = Comp1_;
export const Comp2 = Comp2_;
export const Comp3 = Comp3_;

所以我可以很好地从其他地方导入它,如下所示:

import { Comp1, Comp2, Comp3 } from './components';

显然这不是一个非常好的解决方案,所以我想知道,如果有任何其他方式.我似乎无法直接导出导入的组件.

才知道,从阵营v15.3.0,我们有一个新的名为基类PureComponent与扩展PureRenderMixin内置.我所理解的是,在引擎盖下,它采用了内部道具的浅层比较shouldComponentUpdate.

现在我们有3种方法来定义React组件:

1. 功能无状态组件,不扩展任何类
2. 扩展PureComponent类的组件
3. 扩展Component类的普通组件

一段时间后,我们习惯将无状态组件称为纯组件,甚至是哑组件.似乎"纯"这个词的整个定义现在在React中已经改变了.

虽然我理解这三者之间的基本差异,但我仍然不确定何时选择什么.还有什么是性能影响和权衡取舍？

更新:

这些是我希望澄清的问题:

• 我应该选择将我的简单组件定义为功能(为简单起见)还是扩展PureComponent类(为了性能)？
• 性能提升是否因为我丢失的简单性而得到了真正的平衡？
• Component当我总能使用PureComponent以获得更好的性能时,我是否需要扩展普通类？