Ссылка от Dropdown.Button (и т. Д.)

Question

Как я могу получить ссылку на Dropdown.Button (это antd), когда я устанавливаю ссылку на нее, она возвращает оболочку?

 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>
    );
  }
}

С крючками:

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

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

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

Answer 2

Hei,

Ознакомьтесь с React.forwardRef () здесь.

Это функция, которую вы можете обернуть в дочерний компонент, и она специально разработана длясделать возможным, чтобы родитель имел ссылку на своих детей. Должен решить вашу проблему.

Ура!

Answer 3

Вы можете передать функцию cb в атрибуте ref:

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

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

Или с помощью ловушки useRef:

для функциональных компонентов без классов

const parentRef =React.useRef(null); 

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