отреагировать функция стрелки JavaScript без стрелок? - PullRequest
Новая
       31

отреагировать функция стрелки JavaScript без стрелок?

0 голосов
/ 01 февраля 2019

Я не понимаю, как это может работать в 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} в этом случае.

Ответы [ 3 ]

0 голосов
/ 01 февраля 2019

Это специальный синтаксис в соответствии с новым ключевым словом class, который позволит вам создавать классы.

По сути, это методы этого конкретного класса, и вы не можете определить какой-либо другой метод вне классаиспользуя этот специфический синтаксис.

Для получения дополнительной информации, рассматривайте MDN как своего лучшего партнера .

0 голосов
/ 01 февраля 2019

Методы Arrow и Bound используются для передачи их в качестве обратных вызовов для последующего вызова: 

<Component onClick={this.clickHandler}/>

Это не относится к renderMarkButton, потому что он вызывается в месте, где он используется с правильным this context: 

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

renderMarkButton - метод-прототип класса.Он не работает как функция стрелки, потому что он не связан с контекстом.Вызов его с неверным контекстом приведет к ошибке, потому что не будет this.props объекта: 

const unboundFunction = this.renderMarkButton;
unboundFunction('bold', {...faBold});
0 голосов
/ 01 февраля 2019

По поводу ваших вопросов:

  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

надеюсь, что это поможет:)

...