如何在不将组件包装在 <div> 内的情况下制作悬停状态 HOC？

Question

我正在尝试编写一个为组件提供悬停属性的高阶组件。但是我无法让它与任何类型的组件一起工作。

我的 HOC

function withHover(WrappedComponent) {
  return class extends Component {
    state = {
      hover: false
    }
    onMouseEnter(){
      this.setState({hover: true});
    }
    onMouseLeave(){
      this.setState({hover: false});
    }
    render() {
      return (
        <div onMouseEnter={this.onMouseEnter.bind(this)} onMouseLeave={this.onMouseLeave.bind(this)}>
          <WrappedComponent {...this.props} hover={this.state.hover}/>
        </div>
      )
    }
  }
}

我的问题是我必须将组件包装在 div 中才能使 OnMouse 事件起作用。但是，例如，当我想要在 <table> 中制作一个 <tr> 时，<tr> 将被包装到 <div> 中，这打破了 <table> 逻辑。

我想过将 HOC 的 OnMouse 事件处理程序传递给包装组件并在其中调用它们，但这不太方便，因为所有这些的目的是节省开发时间

所以我的问题是：如何重写这个 HOC 以避免将初始组件包装在 <div> 中？

感谢您的宝贵时间

Answer 1

将子组件包裹在父组件的片段中将事件传递给子 elm
小榆树

class Child extends Component {
  render() {
    return (
      <div
        onMouseLeave={this.props.onMouseLeave || null}
        onMouseEnter={this.props.onMouseEnter || null}
      >
        This is a child Component
      </div>
    );
  }
}

父组件（包装器）

import Child from './child';
class Parent extends Component {
    state = {  }
    onMouseEnter = () =>{
        console.log("mosuse Entered child")
    }
    onMouseLeave = () =>{
        console.log("mosuse left child")
    }
    render() { 
        return ( 
            <>
            <Child onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}></Child>
            </>
         );
    }
}

Answer 2

您可以只从 HOC 渲染 WrappedComponent 并将 onMouseEnter 和 onMouseLeave 函数作为 props 传递，然后通过 props

上的扩展运算符在包装组件中使用它们

代码如下：

function withHover(WrappedComponent) {
  return class extends Component {
    state = {
      hover: false
    }
    onMouseEnter = () => {
      this.setState({hover: true});
    }
    onMouseLeave = () => {
      this.setState({hover: false});
    }
    render() {
      return <WrappedComponent onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} {...this.props} hover={this.state.hover}/>
    }
  }
}

const TableRow = props => {
  return (
    <tr {...props}>
      {props.children}
    </tr>
  )
}
const TableRowWithHover = withHover(TableRow);

如何在不将组件包装在 <div> 内的情况下制作悬停状态 HOC？

How to make an hover state HOC without wraping the component inside a <div>?

javascript

reactjs

higher-order-components