javascript - react : Create onClick HOC without using an additional <div/>

Question

我想避免手动添加 onClick我的自定义组件的属性。

为此，我考虑了一个名为 WithClick 的高阶组件这将用集成的 onClick 包装我的组件属性(property)。

我面临的问题是为了包装它，我必须使用额外的 <div />标记以访问事件属性。 这个标签弄乱了我的 CSS。

示例:

import React, { Component } from 'react'

const WithClick = (WrappedComponent) => {
  class BaseComponent extends Component {
    render () {
      return (
        <div onClick={this.props.onClick}>
          <WrappedComponent {...this.props} />
        </div>
      )
    }
  }

  return BaseComponent
}

export default WithClick

---

解决方案是黑客攻击，允许将 onClick 事件附加到 <React.Fragment />标签或类似的东西。

我尝试将 ref 附加到子项上，但它不起作用，我必须处理子项中的 ref 属性，所以这样做没有意义。

您知道解决方法吗？

Answer 1

虽然我也对这样做的必要性持怀疑态度，但我可以看到一些特定的情况，在这种情况下，您正在向许多组件添加相同的处理程序，这是必要的。

ReactDOM.findDOMNode 被文档劝阻，并在严格模式下弃用。 React.cloneElement 是一个更好的选择。

const addClickToComponent = ({component}) => (
  React.cloneElement(component, {
    onClick: someComplicatedClickFunction,
  }
);

const ComponentWithClick = addClickToComponent(noClickComponent);

我通常制作这些包装器组件而不是 HOC，如果您需要为多个子组件添加一个属性，您可以这样做。

const ClickWrapper = ({children}) => (
  <React.Fragment>
    {React.Children.map(children, child => (
      React.cloneElement(child, {
       onClick: someComplicatedClickFunction,
      )
     )
    }
  </React.Fragment>
 );

 // jsx

 <ClickWrapper>
   <ChildComponent />
   <ChildComponent />
   <ChildComponent />
 </ClickWrapper>