React ref для элемента реагирования, переданного в качестве динамического события

Question

Я строю выпадающий компонент, который получает элемент кнопки в качестве реквизита. Это краткое описание того, что я пытаюсь сделать:

class Dropdown extends React.Component {
   render() {
     let button = this.props.trigger;
     // How do I get a ref to the button native DOM node?
     // How can I attach a react event to the button?

   }
}

И вот как я хочу его использовать:

class App extends React.Component {
   render() {
     return (
          <Dropdown trigger={<button>Click me</button>}>
               dropdown content
          </Dropdown>
    )
   }
}

Короче, если у меня есть переменная с реагирующим элементом,
1. Как я могу получить ссылку на узел button dom, переданный как опора? (Мне нужно передать его на dom-align).
2. Как я могу прикрепить слушателей событий к переданному элементу кнопки?

Answer 1

//For creating reference const (inside constructor)
  ref_name = React.createRef();
// For connect ref to html
   <tag ref={this.ref_name}></tag>

// For creating event create a class method
   handleClick(){}
//Register it inside constructor
  this.handleClick = this.handleClick.bind(this);
// attach with html
  <button onClick={this.handleClick}>Click</button>

class App extends React.Component {
   constructor(props){
      super(props);
      this.button_ref = React.createRef();
      this.handleClick = this.handleClick.bind(this);
   }
   handleClick(event){
       //write your code...
   }

   render() {
       return (
                <Dropdown trigger={<button ref={this.button_ref} onClick={this.handleClick}>Click me</button>}>
                   dropdown content
                </Dropdown>
       )
   }
}

Answer 2

Вот как вы можете сделать это с помощью компонента функции стрелки для кнопки и передать ref и прослушиватели событий.

const Button = ({buttonRef, onEvent}) => <button ref={buttonRef} onEvent />

class Parent extends Component {
  methodForButton = e => {...}
  render() {
    return (
      <Dropdown
        propButton={
         <Button buttonRef={el => this.buttonElement = el} onEvent={this.methodForButton} />
        }
      >{...}<Dropdown />
    );
  }
}

Также вы можете передать кнопку, как дети, а не опора

<Dropdown><Button /><Dropdown />