javascript - 来自 Dropdown.Button (antd) 的引用

Question

如何获取 Dropdown.Button 的 ref(它是 antd)，当我为其设置 ref 时，它会返回一个包装器？

 parent = null;
 parentRef = node => (this.parent = node);

render(){
 return (
 <Dropdown.Button
   ref={this.parentRef}
   overlay={menu}
   type="primary"
  >
     content
 </Dropdown.Button>
 )
}

Answer 1

您需要使用引用 API，useRef 或 React.createRef。

引用Refs and the DOM in React :

class App extends React.Component {
  buttonRef = React.createRef();

  componentDidMount() {
    console.log(this.buttonRef);
  }

  render() {
    return (
      <Dropdown.Button ref={this.buttonRef} overlay={menu} type="primary">
        content
      </Dropdown.Button>
    );
  }
}

带钩子(Hook):

const App = () => {
  const buttonRef = useRef();

  useEffect(() => {
    console.log(buttonRef);
  }, []);

  return (
    <FlexBox>
      <Dropdown.Button ref={buttonRef} menu={menu}>
        drop down
      </Dropdown.Button>
    </FlexBox>
  );
};