React Hooks - 如何使用 useEffect 之外的变量声明来定位元素子元素(使用 useRef)? [英] React Hooks - How to target an element child (with useRef) with a variable declaration outside of useEffect?

问题描述

我正在试验 React Hooks，我想知道如何使用 useRef 定位元素子元素.实际上，我知道如何使用 useRef 定位一个元素.但是当我尝试将子项分配给变量时遇到了一些问题.

这是一个例子:

import React, { useState, useEffect, useRef } from "react";导入./styles.css"；导出默认函数 App() {让 containerRef = useRef(null);让标题，副标题；const myEvent = () =>{控制台日志(标题)；};useEffect(() => {标题 = containerRef.children[0];副标题 = containerRef.children[1];}, []);返回 (<div className="App" ref={el =>(containerRef = el)}><h1 onClick={myEvent}>Hello World!</h1><h2>发生了什么事?</h2>

);}

我想访问标题和副标题变量以创建一个在 useEffect 之外的函数.我知道我对 title 和 subtitle 的第一个声明是错误的.但实际上我不知道如何解决这个问题.我尝试使用 useState，但未能解决我的问题.

(精确度:当然，在我的实际项目中，我只是不想在控制台中显示变量).

有人可以帮我解决这个问题吗?

解决方案

你需要定位你的 current HTML 元素，然后让孩子喜欢:

import React, { useState, useEffect, useRef } from "react";导入./styles.css"；导出默认函数 App() {让 containerRef = useRef(null);const [title, setTitle] = useState("");const myEvent = () =>{控制台日志(标题)；};useEffect(() => {setTitle(containerRef.current.children[0]);}, []);返回 (<div className="App" ref={containerRef}><h1 onClick={myEvent}>Hello World!</h1><h2>发生了什么事?</h2>

);}

这会将孩子记录到控制台.希望这对您有所帮助.

I'm experimenting with React Hooks and I'm wondering how to target elements children with useRef. Actually, I know how to target an element with useRef. But I meet some problems when I'm trying to assign children to a variable.

Here's an example :

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

I would like to access to the title and subtitle variables to create a function outside of useEffect. I know I'm wrong about the first declaration of title and subtitle. But actually I don't know how to fix this. I tried to use useState, but I failed to resolve my problem.

(Precisions : of course, in my real project, I just don't want display the variable in the console).

Can someone help me to fix this ?

解决方案

You need to target your current HTML element and then get children like:

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

This will log children to the console. Hope this will help you.

这篇关于React Hooks - 如何使用 useEffect 之外的变量声明来定位元素子元素(使用 useRef)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！