1

I don't understand how this can work in javascript 

renderMarkButton(type, icon) {

it looks like an arrow function, but without the arrows. Here's the context:

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>
    )
  }
}

I'm also confused by the 

  const { editor } = this.props

which comes from Slate, I believe. I would have expected this.props to be {type,icon} in this case.

4

3 回答 3

8

关于你的问题：

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

希望有帮助:)

于 2019-02-01T10:34:57.630 回答
1

箭头和绑定方法对于将它们作为稍后调用的回调传递很有用：

<Component onClick={this.clickHandler}/>

情况并非如此，renderMarkButton因为它是在使用正确this上下文的地方调用的：

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

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

const unboundFunction = this.renderMarkButton;
unboundFunction('bold', {...faBold});
于 2019-02-01T11:12:42.883 回答
0

这是根据 newclass关键字的特殊语法，可让您创建类。

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

如需更多信息，请将 MDN 视为您的最佳合作伙伴。

于 2019-02-01T10:35:24.277 回答