如何从单独的 JSX 文件中引用 div 并将其发送到另一个 JSX 文件

Question

所以我有 app.jsx 调用我所有其他的 JSX 文件。这样我就可以将每个组件组织在自己的文件中。我想导航到网站的每个部分（都在一个页面上，只是不同的区域）。唯一的问题是我似乎无法参考哪里我想去。我想如果我引用导入的 jsx 文件，它会得到它的 DOM 元素。但这是行不通的。如果我在同一个 App.jsx 文件中直接引用了一个 div，这似乎是可行的。但是我需要得到子 div 元素。

function App() {
  const aboutmeOnClickRef = useRef(null);
  const portfolioOnClickRef = useRef(null);
  const employmentOnClickRef = useRef(null);
  const educationOnClickRef = useRef(null);
  const letschatOnClickRef = useRef(null);

  return (
<div className="app">
  <Topbar
    aboutmeOnClickRef={aboutmeOnClickRef}
    portfolioOnClickRef={portfolioOnClickRef}
    employmentOnClickRef={employmentOnClickRef}
    educationOnClickRef={educationOnClickRef}
    letschatOnClickRef={letschatOnClickRef}
  />

  <div className="sections">
    <Intro />
    <DisplayAboutMe ref={aboutmeOnClickRef} />
    <Portfolio ref={portfolioOnClickRef} />
    <Employment ref={employmentOnClickRef} />
    <Education ref={educationOnClickRef} />
    <LetsChat ref={letschatOnClickRef} />
  </div>
</div>
  );
}

//This is what I want to do, but doesn't work
//const DisplayAboutMe = React.forwardRef((props, ref) => <AboutMe ref={ref} />);

//This one works but creates a whole new div and doesn't get my jsx file
const DisplayAboutMe = React.forwardRef((props, ref) => <div ref={ref} />);

AboutMe.jsx

import React from "react";
import styles from "./aboutme.module.scss";

export default function AboutMe() {
  return (
    <div className={styles.aboutme} id={styles.aboutme}></div>
  );
}

Answer 1

默认情况下，函数组件的引用不执行任何操作。您需要使用 forwardRef 来告诉 React 您希望 ref 指向哪个 dom 元素。目前，您的关于我的组件不会执行此操作。它可能是这样的：

import React from "react";
import styles from "./aboutme.module.scss";

const AboutMe = React.forwardRef((props, ref) => {
  return (
    <div ref={ref} className={styles.aboutme} id={styles.aboutme}></div>
  );
});

export default AboutMe

通过上述更改，您应该不需要 DisplayAboutMe。应用程序可以渲染一个 <AboutMe> 并传入一个 ref，该 ref 将被分配到 AboutMe 中的 div。

function App() {
  const aboutmeOnClickRef = useRef(null);
  // ...

  <div className="sections">
    <Intro />
    <AboutMe ref={aboutmeOnClickRef} />
  </div>
  // ...
}

// In topBar:

function TopBar(props) {
  return (
    // ...
    <a onClick={() => { props.aboutMeOnClickRef.current.scrollIntoView() }}/>
    // ...
  )
}

如何从单独的 JSX 文件中引用 div 并将其发送到另一个 JSX 文件

How do you reference a div from a separate JSX file and send it to another JSX file

ref

reactjs