9

我想实现一个更高阶的反应组件，它可以用来轻松跟踪任何反应组件上的事件（如点击）。这样做的目的是轻松地将点击（和其他事件）挂钩到我们的第一方分析跟踪器中。

我遇到的挑战是 React 合成事件系统要求事件（如onClick）绑定到响应 DOM 元素，如div. 如果我要包装的组件是自定义组件，就像通过高阶函数实现的每个 HOC 一样，我的点击事件不会正确绑定。

例如，使用此 HOC，onClick处理程序将为 button1 触发，但不会为 button2 触发。

// Higher Order Component 
class Track extends React.Component {
  onClick = (e) => {
    myTracker.track(props.eventName);
  }

  render() {
    return React.Children.map(
      this.props.children,
      c => React.cloneElement(c, {
        onClick: this.onClick,
      }),
    );
  }
}

function Wrapper(props) {
  return props.children;
}

<Track eventName={'button 1 click'}>
  <button>Button 1</button>
</Track>

<Track eventName={'button 2 click'}>
  <Wrapper>
    <button>Button 2</button>
  </Wrapper>
</Track>

带有工作示例的 CodeSandbox： https ://codesandbox.io/embed/pp8r8oj717

我的目标是能够使用这样的 HOF（可选地作为装饰器）来跟踪对任何 React 组件定义的点击。

export const withTracking = eventName => Component => props => {
  return (
    <Track eventName={eventName}>
      {/* Component cannot have an onClick event attached to it */}
      <Component {...props} />
    </Track>
  );
};

我能想到的唯一解决方案是在每个孩子上使用 a并在填充Ref后手动绑定我的点击事件。Ref

任何想法或其他解决方案表示赞赏！

更新： 使用remapChildren@estus 回答中的技术和更手动的方式来渲染包装的组件，我能够让它作为一个高阶函数工作 - https://codesandbox.io/s/3rl9rn1om1

export const withTracking = eventName => Component => {
  if (typeof Component.prototype.render !== "function") {
    return props => <Track eventName={eventName}>{Component(props)}</Track>;
  }
  return class extends Component {
    render = () => <Track eventName={eventName}>{super.render()}</Track>;
  };
};
4

1 回答 1

3

Wrapper通过常规方式（例如 ref或ReactDOM.findDOMNode. 为了做到这一点，应该递归地遍历元素子元素。

一个例子：

remapChildren(children) {
  const { onClick } = this;

  return React.Children.map(
    children,
    child => {   
      if (typeof child.type === 'string') {
        return React.cloneElement(child, { onClick });
      } else if (React.Children.count(child.props.children)) {
        return React.cloneElement(child, { children: this.remapChildren(
          child.props.children
        ) });
      }
    }
  );
}

render() {
  return this.remapChildren(this.props.children);
}

remapChildren仅放置onClick在 DOM 元素上。请注意，此实现跳过了嵌套的 DOM 元素。

于 2018-10-08T18:23:27.360 回答