相关疑难解决方法(0)

我想尽可能地为我的小项目使用ES6(ES2015).现在我想使用React的箭头函数.

// What I want
let Text = React.createClass({
    componentDidMount: () => {
        setInterval(this.updateCurrentTime, 1000);
    }
}

// What I have
let Paragraph = React.createClass({
    render: () => (<div className="MySuperTable"><Text name="Dodo" startDate={(new Date()).toString()} /></div>)
});

let Text = React.createClass({
    getInitialState: function () {
        return {
            currentTime: (new Date()).toString()
        }
    },
    componentDidMount: function () {
        setInterval(this.updateCurrentTime, 1000);
    },
    updateCurrentTime: function () {
        this.setState({
            currentTime: (new Date()).toString()
        });
    },
    render: function () {
        return (
            <div>
                <span>Hello my name is {this.props.name}</span>
                <span>And …

考虑

function f() { ... }

另一个函数dosomething期望像f这样的函数

function dosomething(callback) { ...; callback() } 

期望f(dosomething的一个例子可以是setTimeout)

调用dosomething并传递f,之间有区别:

dosomething(f);

和

dosomething(() => f());

这些选项中的任何一个都比较好

我有一个工具提示的bootstrap修改.并使用webpack/babel处理我的js

我的代码的简化可以是:

    $('[data-toggle="tooltip"]').tooltip({
        title: () => {
            return $(this).children('.tooltip-html-content').html();
        }
    });

这应该是元素,bootstrap将调用此函数:

   getTitle: function () {
      var title
        , $e = this.$element
        , o = this.options

      title = $e.attr('data-original-title')
        || (typeof o.title == 'function' ? o.title.call($e[0]) :  o.title)

      return title
    }

重要的是:

 o.title.call($e[0])

其中$ e [0]是工具提示dom元素.

好吧,当我用babel处理这个结果时,结果会改变this为_thisa,然后他将_this分配给他认为真实的值.

问题:我可以在babel中避免这种特定功能的转换吗？

=====

基于响应的最终解决方案:

   getTitle: function getTitle() {

我有一个JavaScript对象:

var methods = {

  classStyle() {
    console.log('Class style function');
  },

  traditionalStyle: function() {
    console.log('Traditional style function');
  },

  arrowStyle: () => {
    console.log('Arrow style function');
  }

};

methods.classStyle();
methods.traditionalStyle();
methods.arrowStyle();

输出如预期:

(index):70 Class style function
(index):74 Traditional style function
(index):78 Arrow style function

我的问题是:

1. 这些不同的宣告方法之间是否有任何区别？
2. 这取决于个人喜好吗？或者内部运作会改变吗？
3. 使用不同风格时是否需要考虑？

我想了解正常函数与箭头函数的行为.

箭头功能:

function arrowFunc() {
  return () => arguments
}


console.log(arrowFunc(1, 2, 3)(1))

正常功能

function normalFunc() {
  return function() {
    return arguments
  }
}

console.log(normalFunc(1, 2, 3)(1))

两个结果都是相同的,但看起来像上面定义的arrowFunc考虑第一个arg列表,其中normalFunc考虑第二组arg列表.

还尝试了babel-compilation来理解差异,但看起来行为有所不同,如下图所示:

通天输出:

"use strict";

function arrowFunc() {
  var _arguments = arguments;

  return function() {
    return _arguments;
  };
}

console.log(arrowFunc(1, 2, 3)(1));

function normalFunc() {
  return function() {
    return arguments;
  };
}

console.log(normalFunc(1, 2, 3)(1));

I'm new to react native, I'm bit confused about components.

As I created first react native app I saw App.js the components in App.js created as per following code:

export default function App() {
 ...
}

and as I saw tutorials many people almost all people making components as per following code:

const FirstComponents = () => {
  ...
}

I'm also confuse about function components and class based components which created as per following code:

export default class FirstComponents …

let student = {
    

fname: "Carlos",
    lname: 'Dubón',
    sayHi(){
        alert(`Hi my name is ${this.fname}`);
    },
    sayBye: function() {
        alert(`Bye ${this.fname}`);
    },
    sayHiAgain: ()=> {
        alert(`Hi my name is ${this.fname}`);
    }
}

student.sayHiAgain();

我是 Javascript 中的 OOP 新手，我知道我编写方法的 3 种方式完全相同。

student.sayHi(); 工作并显示警报 =>“嗨，我的名字是卡洛斯”

但student.sayHiAgain();显示警报 =>“嗨，我的名字未定义”

我错过了什么？

我正在开发一个全部使用 javascript 但导出手写类型声明（automerge/index.d.ts）的存储库。

代码库的结构是它有一个 Frontend 和一个 Backend，加上一个公共 API，除了直接从 Frontend 和 Backend 重新导出一些函数外，还提供了一些自己的便利功能。

像这样的东西：

declare module `foo` {

  // functions that only exist in the public API
  function a
  function b
  function c

  // functions exposed directly from namespace A
  function q
  function r
  function s

  // functions exposed directly from namespace B
  function x
  function y
  function z

  namespace A {
    function q
    function r
    function s
    function t
  }

  namespace B {
    function v
    function w
    function …

此问题旨在作为有关由于将单行/表达式箭头函数体语法与自动返回与其多行/块版本混淆而产生的问题的规范重复目标。

我有一个箭头函数来添加两个数字，但是当我调用它时，它返回undefined。为什么？

const add = (a, b) => {
  a + b
}

console.log(add(1, 2)) // expected: 3, actually: undefined

替代问题：

我的 React 组件应该使用 渲染列表项map，但列表仍为空。为什么？

<ul>
  {list.map(item => {
    <li>
      <a href="{item.url}">{item.name}</a>
    </li>
  })}
</ul>

我只是将我的一些代码更改为ES6,并且我遇到了一些代码,其中箭头功能不起作用,我不确定我理解为什么.代码来自Hapi的插件来装饰reply界面.

ES5:

server.decorate('reply', 'test', function(schema, response) {
  return this.response(mask(schema, response));
});

ES6:

server.decorate('reply', 'test', (schema, response) => {
  return this.response(mask(schema, response));
});

E66不起作用并抛出错误:

Uncaught error: this.response is not a function

为什么是这样？