React Hooks 尝试在数组 ref 中使用 useState

Question

我正在尝试使用React中的Hooks，但对于useState和References有疑问。我的问题是因为我想在我的jsx中创建多个references，但我不知道如何像数组一样使用usestate，也就是在usestate数据的插入中。

import React, { useState, useEffect } from "react";
import { Row, Col, Image, ListGroup, Container } from "react-bootstrap";
import AOS from "aos";
import "./css/App.css";
import "aos/dist/aos.css";
import Skills from "./Components/Skills";
import Work from "./Components/Work";

const App = () => {
  const [ref, setRef] = useState([]);

  useEffect(() => {
    AOS.init({
      duration: 2000
    });
  });

  function handleOnClick(event) {
    ref.scrollIntoView();
  }

  return (
    <div className="App">
      <Row>
        <Col className="menu text-center" lg={4}>
          <div className="picture">
            <Image
              src={process.env.PUBLIC_URL + "/Images/picture.jpg"}
              roundedCircle
            />
          </div>

          <h1 className="menu-name">Fulanito Detal</h1>

          <h4 className="menu-office">Software Engineer - Web Developer</h4>

          <div>
            <Row>
              <Col lg={3}></Col>
              <Col lg={6} className="menu-text">
                <ListGroup>
                  <ListGroup.Item
                    onClick={event => handleOnClick(event)}
                    active
                  >
                    ABOUT
                  </ListGroup.Item>
                  <ListGroup.Item>WORK EXPERIENCE</ListGroup.Item>
                  <ListGroup.Item>EDUCATION</ListGroup.Item>
                  <ListGroup.Item>SKILLS</ListGroup.Item>
                  <ListGroup.Item>CONTACT</ListGroup.Item>
                </ListGroup>
              </Col>
              <Col lg={3}></Col>
            </Row>
          </div>
        </Col>

        <Col className="info text-center" lg={8}>
          <Container>
            <div className="about"></div>

            <div
              className="work"
              ref={ref => {
                setRef(ref);
              }}
            >
              <Work />
            </div>

            <div className="education"></div>

            <div
              className="skills"
              ref={ref => {
                setRef(ref);
              }}
            >
              <Skills />
            </div>

            <div className="contact"></div>
          </Container>
        </Col>
      </Row>
    </div>
  );
};

export default App;

对于一个 ref 来说，这个代码片段可以正常工作。如果点击后重定向到技能页面，但我想使用类似数组的状态来处理所有引用，但我卡在了这一点上。感谢任何帮助！

- Carlos Deseda

---

为什么不使用专门用于处理 ref 的 useRef hook？ - skovy

你需要动态生成菜单项吗？还是它们是静态的？如果是静态的，你可以为每个菜单项声明一个 ref。如果需要动态生成，就需要更多的努力。 - dance2die

我尝试使用current.focus()，但不起作用。肯定是我的错误，但我找不到解决方案。菜单项是静态的。 - Carlos Deseda

明白了，谢谢。我会考虑静态特性并回复您。-------不用了。@skovy在下面的答案恰好符合我的要求。 - dance2die

无论如何感谢你的帮助！非常感激。 - Carlos Deseda

你可以使用引用数组。 - Omer

Answer 1

下面是使用 useRef 钩子的简化示例:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const App = () => {
  const work = React.useRef();
  const skills = React.useRef();

  return (
    <div>
      <button onClick={() => work.current.scrollIntoView()}>
        WORK EXPERIENCE
      </button>
      <button onClick={() => skills.current.scrollIntoView()}>SKILLS</button>
      <div className="another" />
      <div className="work" ref={work}>
        WORK SECTION
      </div>
      <div className="skills" ref={skills}>
        SKILL SECTIONS
      </div>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

- skovy