javascript - 如何将 ref 传递给使用 onClickOutside('react-onclickoutside') 的 HOC？

Question

我onClickOutside('react-onclickoutside')用于我的 HOC，但我无法为这个 HOC 传递 ref，我有类似下面的内容并出现错误：

const inputRef = useRef();
....
<SomeCompontnt
    inputRef={inputRef}
    items={items}
    onSelect={onSelect}
    value={selectedItem}
 />
....
export default onClickOutside(forwardRef(
(props, inputRef) => <MyHoc inputRef={inputRef} {...props} />)
);
....

错误

未捕获的类型错误：无法读取 onClickOutside.render 处未定义的属性“isReactComponent”（react-onclickoutside.es.js?7e48:325）

标签： javascriptreactjs

Answer 1

试试这个：你可以在 OnclickoutsideDemo MyHookClick 控制台中看到 MyHoc onClick 输出

import React from "react";
import { render } from "react-dom";
import onClickOutside from "react-onclickoutside";

class OnclickoutsideDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    const options = this.state.showOptions ? (
      <MyHookClick
        onClick={e => console.log(e)}
        handleClickOutside={() => this.setState({ showOptions: false })}
      />
    ) : null;

    return (
      <div>
        <span
          onClick={() =>
            this.setState({ showOptions: !this.state.showOptions })
          }
        >
          Click Me
        </span>
        {options}
      </div>
    );
  }
}

const MyHoc = React.forwardRef((props, ref) => (
  <div ref={ref} onClick={e => props.onClick("HaHa")}>
    Click Me to see HaHa in console !
  </div>
));

const MyHookClick = onClickOutside(props => (
  <MyHoc ref={props.inputRef} {...props} />
));

export default OnclickoutsideDemo;

render(<OnclickoutsideDemo />, document.getElementById("root"));