React Hooks - Как нацелить дочерний элемент (с useRef) с объявлением переменной вне useEffect?

Question

Я экспериментирую с React Hooks и мне интересно, как нацелить элементы на детей с помощью useRef. На самом деле, я знаю, как нацелить элемент с помощью useRef. Но я сталкиваюсь с некоторыми проблемами, когда пытаюсь назначить детей переменной.

Вот пример:

import React, { useState, useEffect, useRef } from "react";
import "./styles.css";

export default function App() {
  let containerRef = useRef(null);

  let title, subtitle;

  const myEvent = () => {
    console.log(title);
  };

  useEffect(() => {
    title = containerRef.children[0];
    subtitle = containerRef.children[1];
  }, []);

  return (
    <div className="App" ref={el => (containerRef = el)}>
      <h1 onClick={myEvent}>Hello World!</h1>
      <h2>What's going on ?</h2>
    </div>
  );
}

Я хотел бы получить доступ к переменным заголовка и субтитров, чтобы создать функцию вне useEffect . Я знаю, что ошибаюсь насчет первого объявления title и subtitle . Но на самом деле я не знаю, как это исправить. Я пытался использовать useState , но мне не удалось решить мою проблему.

(Точность: конечно, в моем реальном проекте я просто не хочу отображать переменную в консоли) .

Может кто-нибудь помочь мне это исправить?

Answer 1

Вы можете использовать useRef для хранения какого-либо объекта между визуализациями:

import React, { useRef, useEffect } from "react";
import "./styles.css";

export default function App() {
  const containerRef = useRef(null);
  const titleRef = useRef(null);
  const subtitleRef = useRef(null);

  const myEvent = () => {
    console.log(titleRef.current);
  };

  useEffect(() => {
    titleRef.current = containerRef.current.children[0];
    subtitleRef.current = containerRef.current.children[1];
  }, []);

  return (
    <div className="App" ref={containerRef}>
      <h1 onClick={myEvent}>Hello World!</h1>
      <h2>What's going on ?</h2>
    </div>
  );
}

CodeSandbox: https://codesandbox.io/s/jovial-sound-e0eq2

Answer 2

Вам нужно настроить таргетинг на элемент current HTML, а затем получить дочерние элементы, например:

import React, { useState, useEffect, useRef } from "react";
import "./styles.css";

export default function App() {
  let containerRef = useRef(null);
  const [title, setTitle] = useState("");

  const myEvent = () => {
    console.log(title);
  };

  useEffect(() => {
    setTitle(containerRef.current.children[0]);
  }, []);

  return (
    <div className="App" ref={containerRef}>
      <h1 onClick={myEvent}>Hello World!</h1>
      <h2>What's going on ?</h2>
    </div>
  );
}

Это позволит зарегистрировать дочерние элементы на консоли. Надеюсь, это поможет вам.