1
votes

Comment obtenir les propriétés des éléments dans reactjs

J'essaie d'obtenir la hauteur de l'élément conteneur parent, à utiliser comme hauteur d'un élément d'arrière-plan SVG.

Existe-t-il un moyen d'obtenir et de transmettre cette propriété?

Je reçois toujours "TypeError: Cannot read property 'refs' of undefined"

const Services = ({ classes }) => {
    return (
        <div className={classes.Container} ref="container">//Element I want the height of
            <div className={classes.BGContainer}>
                <BGSVG width={'210'} height={this.refs.container.height} color={'blue'} />//Where I want to pass height to
            </div>
            <div className={classes.Services}>
                {services.map((e, i) => (
                    <ServiceItem
                        title={e.title}
                        icon={e.icon}
                        info={e.info}
                        inverted={i % 2 === 1 ? true : false}
                    />
                ))}
            </div>
        </div>
    );

javascript reactjs svg

1 commentaires

si vous consignez la console this.refs.container dans ce composant fonctionnel, qu'obtenez-vous?

3 Réponses :

0
votes

Vous n'avez pas lié "ceci". Essayez height = {() => this.refs.container.height}

2 commentaires

Cela me donne "Les composants de fonction ne peuvent pas avoir de références. Vouliez-vous utiliser React.forwardRef ()?" comme une erreur.

Oui, vous ne pouvez utiliser des références que sur des composants de classe, c'était la prochaine chose que je voulais souligner. Convertissez-le en classe, par exemple "Les services de classe étendent React.Component". Si vous souhaitez vous en tenir à l'itinéraire fonctionnel, la réponse de Stephen Collins peut être plus appropriée.

0
votes

Si votre composant Services est à l'intérieur, disons Composant ServicesWrapper, ce que vous devez faire est de le mettre

`height={this.props.servicesWrapperContainerRef.current.clientHeight}`

Ensuite, sur le JSX du composant wrapper place

`ref={this.servicesWrapperContainerRef}`

2 commentaires

Je veux la hauteur d'un élément de l'intérieur du même composant. Je pense que j'ai modifié de cette manière mais j'obtiens toujours l'erreur à propos de React.forwardRef ()

Oh, que vous devez le transformer de composant fonctionnel en composant de classe, puis mettre la référence créée sur le même div que vous avez fait maintenant.

1
votes

Dans un composant fonctionnel, vous devez utiliser le React Hook appelé useRef comme ceci:

const TextInputWithFocusButton = (props) => {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

vous verrez si vous vous déconnectez inputEl qu'une référence à l'élément d'entrée est enregistrée. Les références d'élément DOM vous permettent d'accéder à la plupart des propriétés de l'élément DOM particulier référencé.

2 commentaires

Cela semble avoir éliminé l'erreur que j'obtenais, et je peux maintenant enregistrer l'élément dans la console. Mais quand j'essaye d'accéder à ref.current.height ou ref.current.clientHeight, j'obtiens "TypeError: Cannot read property 'clientHeight' of null"

Cela peut se produire en fonction de la hiérarchie de vos composants, qui influence comment et quand un composant sera rendu, et avec quoi. Quelque chose de facile à essayer ici, c'est quelque chose comme ref.current && ref.current.clientHeight et attribuer le résultat. Je suppose que vous voyez également plusieurs journaux de console avec une seule instruction console.log?