使用 React Hooks 渲染时如何使页面自动滚动到组件

Question

I'm new to coding and been working with this simple portfolio page logic:

codesandbox

By using useRef and use effect hooks, I've got into a point in which the logic in child component scrolls the page to the most recent useRef value.

Now when the buttons are being pushed several times, the useRef value stops updating. For example, when the "things" button is pressed, it stays in that value and scrolls towards it with every button.

There's also a second problem in which the pages that are rendered on top of the homepage are being scrolled to top immediately without the scrollIntoView animation. Is there a way to lock a certain height when components are rendered on the top side?

Also, I'm aware of my bad habit of duplicating the same logic for every button and state. How could I work around this to make it more DRY?

Answer 1

I created one method to change state, please let me know if there will be any confusion. Here you can see example for scrolling part How to Scroll to Item in React .

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

import Portfolio from "./portfolio";
import Things from "./things";
import Contact from "./contact";
import About from "./about";

function App() {
  const [showContent, setShowContent] = useState({
    about: false,
    contact: false,
    portfolio: false,
    things: false
  });

  const showRuntimeContent = modelName => {
    if (modelName) {
      setShowContent({[modelName]: !showContent[modelName]});
    }
  };

  return (
    <div className="home">


      <div className="container">
        <button onClick={() => showRuntimeContent("contact")}>Contacts</button>
        <button onClick={() => showRuntimeContent("portfolio")}>Portfolio</button>
        <button onClick={() => showRuntimeContent("about")}>About</button>
        <button onClick={() => showRuntimeContent("things")}>Things</button>

        <h1> HOME</h1>
      </div>
      <div>
      {showContent.contact ? <Contact /> : null}
      {showContent.portfolio ? <Portfolio /> : null}
      {showContent.about ? <About /> : null}
      {showContent.things ? <Things /> : null}
      </div>
    </div>
  );
}

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