是否可以扩展JSX / React以允许自定义指令？

Question

例如，我可以定义像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?
}

Answer 1

react 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}
      />;
    }
  }
}