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

为此，我考虑了一个名为的高阶组件WithClick这将用集成的组件包裹我的组件onClick财产。

我面临的问题是，为了包装它，我必须使用额外的<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

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

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

你知道解决方法吗？

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

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>