React：在不使用額外的情況下創建 onClick HOC<div />

Question

我想避免手動將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 道具，所以這樣做沒有意義。

你知道一個解決方法嗎？

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>

Answer 2

包裝組件

class Wrapper extends Component {
    render() { 
        return ( 
        <React.Fragment>
            <WrappedComponent />
        </React.Fragment>);
    }
    componentDidMount(){
        //This will return the container of WrappedComponent
        ReactDOM.findDOMNode(this).onclick = this.props.onClick
    }
}
export default Wrapper;

包裹組件

class WrappedComponent extends Component {
  render(){
    return(
      <div className="wrappedComp"><span>I am wrapepd component</span></div>
    )
  }
}

Answer 3

對於那些不想弄亂 CSS 的人來說，使用 span 對我有用。

Answer 4

在某些情況下，使用display: contents;可能會很方便display: contents; 在包裝器元素上，因此附加的onClick包裝器不會破壞您的代碼。