1
votes

Comment créer une référence dans un composant basé sur une classe et la transmettre au composant fonctionnel dans React?

Donc, j'ai ce composant basé sur la classe:

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

Dans le constructeur, je crée ref, puis je veux le passer au composant DropdownBox, qui est rendu. Dans le composant DropdownBox, j'ai essayé d'utiliser des hooks de réaction, mais je pense que ce n'est pas la bonne façon. Comment le faire correctement? Remarque, je ne veux pas changer mon composant fonctionnel en classe!

Voici le code du composant DropdownBox:

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

javascript reactjs

0 commentaires

3 Réponses :

0
votes

Vous pouvez donner à la dropdownBox une fonction qui définira la référence. Pour ce faire, vous pouvez ajouter dans votre composant de menu une fonction comme la suivante:

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

Ensuite, vous donnez cette fonction à votre composant de liste déroulante comme ceci:

Enfin, dans votre composant déroulant, vous donnez cette fonction au div comme ceci:

    Cela garantira que votre menu aura une référence au top div dans la liste déroulante.

0 commentaires

0
votes

Il vous suffit d'assigner l'accessoire reference dans votre composant DropdownBox à l'accessoire ref du div que vous voulez référence de.

const dropdownBox = props => {
  return (
    <div ref={props.reference} className='DropdownBox-Container' style={props.styles}>
      { /* ... */ }
    </div>
  )
}

React affectera seul le composant à la variable dropdownRef .

0 commentaires

1
votes

Vous pouvez utiliser forwarding refs pour obtenir une référence à l'élément sous-jacent en dehors du composant enfant. Par exemple:

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

Puis dans OptionsMenu:

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

0 commentaires