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挂钩，但是我认为我的方法不对。如何正确制作？请注意，我不想将功能组件切换为基于类！

这是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获取对子组件外部基础元素的引用。例如：

class Expressions_cal(GM2_setup_to_convert):

    def __init__(self,file_name=default, path_to_folder=default):
        super().__init__(file_name, path_to_folder)

        self.spec_excl_file_cal_expr = pd.read_excel(self.file_to_convert, sheet_name=' Expression Calculation ', header=None, skiprows=[0, 1])

然后在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

Answer 2

您可以给dropdownBox一个函数来设置参考。为此，您可以在菜单组件中添加如下功能：

const onDropdownRef = (ref) => {
    this.dropdownBoxRef.current = ref;
}

然后将此功能提供给下拉组件，如下所示：<DropdownBox onRef={this.onDropdownRef} styles={this.props.styles}>

然后最后在下拉组件中将此函数提供给div，如下所示： <div ref={props.onRef} className='DropdownBox-Container' style={props.styles}>

这将确保您的菜单在下拉框中具有对顶部div的引用。

Answer 3

只需将reference组件中的DropdownBox属性分配给要引用的ref的{{1}}属性。

div

React会自行将组件分配给const dropdownBox = props => { return ( <div ref={props.reference} className='DropdownBox-Container' style={props.styles}> { /* ... */ } </div> ) }变量。

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

3 个答案: