javascript - 如何在基于类的组件中创建 ref 并将其传递给 react 中的功能组件？

Question

所以我有这个基于类的组件:

import React, { Component } from 'react'
import './OptionsMenu.sass'

import DropdownBox from '../DropdownBox/DropdownBox'
import Icon from '../Icon/Icon'

class OptionsMenu extends Component {
    constructor(){
        super()
        this.dropdownBoxRef = React.createRef()
    }

  handleClickOutside = event => {
    if (this.dropdownBoxRef && !this.dropdownBoxRef.current.contains(event.target)) {
      this.props.close()
    }
  }

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside)
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside)
  }

  render() {
    const options = this.props.options.map(option => (
      <li className='OptionsList-Element'>
        <div className='OptionsList-ElementIcon'>
          <Icon name={option.icon} />
        </div>
        <span>{option.label}</span>
      </li>
    ))
    return (
      <DropdownBox reference={this.dropdownBoxRef} styles={this.props.styles}>
        <ul className='OptionsList'>{options}</ul>
      </DropdownBox>
    )
  }
}

export default OptionsMenu

在构造函数中我正在创建 ref，然后我想将它传递给呈现的 DropdownBox 组件。在 DropdownBox 组件中，我尝试使用 react 钩子(Hook)，但我认为我的方法是错误的。如何正确制作？请注意，我不想将我的功能组件切换为基于类的!

DropdownBox组件代码如下:

const dropdownBox = props => {
  const dropdownBoxRef = useRef(props.reference) 

  return (
    <div ref={dropdownBoxRef} className='DropdownBox-Container' style={props.styles}>
      <div className='DropdownBox'>
        <div className='DropdownBox-Triangle' />
        {props.children}
      </div>
    </div>
  )
}

Answer 1

您可以使用 forwarding refs获取子组件外部底层元素的引用。例如:

const DropdownBox = React.forwardRef((props, ref) => (
    <div ref={ref} className='DropdownBox-Container' style={props.styles}>
      <div className='DropdownBox'>
        <div className='DropdownBox-Triangle' />
        {props.children}
      </div>
    </div>
));

然后在 OptionsMenu 中:

 return (
      <DropdownBox ref={this.dropdownBoxRef} styles={this.props.styles}>
        <ul className='OptionsList'>{options}</ul>
      </DropdownBox>
)