react javascript 没有箭头的箭头函数？

Question

我不明白这在 javascript

中是如何工作的

renderMarkButton(type, icon) {

它看起来像一个箭头函数，但没有箭头。这是上下文：

class HoverMenu extends React.Component {

  renderMarkButton(type, icon) {
    const { editor } = this.props
    return (
      <div className="editorButton" 
            onMouseDown={event => this.onClickMark(event, type)}>
        <FontAwesomeIcon color="#666" active={isActive} 
            className="editorButton" icon={icon}  />
        </div>
    )
  }
  render() {
    return (
      <div>
        {this.renderMarkButton('bold', {...faBold})}
      </div>
    )
  }
}

我也对

感到困惑

  const { editor } = this.props

我相信它来自 Slate。在这种情况下，我希望 this.props 是 {type,icon}。

Answer 1

关于您的问题：

renderMarkButton(type, icon) { 只是 es6 class 语法： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
const { editor } = this.props 被称为 "destructuring"。你可以在这里阅读：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

希望对您有所帮助:)

Answer 2

这是根据新 class 关键字的特殊语法，可以让您创建 classes。

基本上，这些是特定 class 的方法，您不能使用该特定语法定义 class 之外的任何其他方法。

更多信息，consider MDN as your best partner。

Answer 3

箭头和绑定方法对于将它们作为回调传递以供稍后调用非常有用：

<Component onClick={this.clickHandler}/>

renderMarkButton 不是这种情况，因为它是在与正确的 this 上下文一起使用的地方调用的：

this.renderMarkButton('bold', {...faBold})

renderMarkButton是class原型方法。它不像箭头函数那样工作，因为它没有绑定到上下文。使用错误的上下文调用它会导致错误，因为没有 this.props 对象：

const unboundFunction = this.renderMarkButton;
unboundFunction('bold', {...faBold});

react javascript 没有箭头的箭头函数？

react javascript arrow function without arrows?

javascript

reactjs

arrow-functions

slate