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

Question

所以我有了app.jsx，它调用了我所有的其他JSX文件。这样，我就可以将每个组件组织在自己的文件中。我想导航到网站的每个部分(所有在一个页面，只是不同的领域)。唯一的问题是我似乎不能参考我想去的地方。我想如果我引用导入的jsx文件，它就会得到它的DOM元素。但这不管用。看起来可行的是，如果在同一个App.jsx文件中直接引用了一个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来告诉您希望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了。App可以呈现一个<AboutMe>并传入一个引用，并且这个引用将被分配给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() }}/>
    // ...
  )
}