您知道解决方法吗？

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

解决方案将是黑客，允许将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 对我有用。

反应：创建onClick HOC，而无需使用其他<div>

您知道解决方法吗？

3 个答案: