Можно ли расширить JSX / React, чтобы учесть пользовательские директивы? - PullRequest
Новая
       16

Можно ли расширить JSX / React, чтобы учесть пользовательские директивы?

0 голосов
/ 29 марта 2019

Например, могу ли я определить свойство как trackClick={}, чтобы я мог использовать его в своем коде JSX следующим образом? 

class MyComponent extends React.Component {

  render() {
    return <a href="/foo" trackClick={{ some: "data" }}>bar</a>
  }

}

export default withTracking(MyComponent)

function withTracking(WrappedComponent) {
  // do something here to make `trackClick` possible?
}

1 Ответ

0 голосов
/ 29 марта 2019

реакция HOC - это то, что вам нужно понять: 

function withTracking(WrappedComponent) {
  return class extends React.Component {
    // this.props.trackClick
    trackHandler => (trackClick) => (e) => {
       // prevent default, since you're using `a` tag
       e.preventDefault()
      // do something with trackClick
    }
    render() {
      const { trackClick, ...rest } = this.props
      return <WrappedComponent 
        onClick={this.trackHandler(trackClick)} 
        {...rest}
      />;
    }
  }
}
...