Javascript 如何使页面在使用React钩子呈现时自动滚动到组件

我不熟悉编码，一直在使用这个简单的公文包页面逻辑：

通过使用useRef和use-effect挂钩，我进入了一个点，子组件中的逻辑将页面滚动到最新的useRef值

现在，当按下按钮数次时，useRef值停止更新。例如，当按下“things”按钮时，它将保持该值，并随着每个按钮向该值滚动

还有第二个问题，在主页顶部呈现的页面在没有scrollIntoView动画的情况下被立即滚动到顶部。在顶部渲染组件时，是否有方法锁定特定高度

---

此外，我也意识到我的坏习惯，即对每个按钮和状态重复相同的逻辑。我怎样才能解决这个问题，使它更干燥

我创建了一个方法来更改状态，请告诉我是否会有任何混淆。这里您可以看到滚动部分的示例

import React，{useState，useRef，useffect}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
从“/Portfolio”导入投资组合；
从“/事物”导入事物；
从“/Contact”导入联系人；
从“/About”导入关于；
函数App（）{
const[showContent，setShowContent]=useState({
关于：假，
联系人：false，
投资组合：错，
事情：假的
});
const showRuntimeContent=modelName=>{
if（modelName）{
setShowContent（{[modelName]：！showContent[modelName]}）；
}
};
返回(
showRuntimeContent（“联系人”）}>联系人
showRuntimeContent（“公文包”）}>portfolio
showRuntimeContent（“about”）}>about
showRuntimeContent（“things”）}>things
家
{showContent.contact？：null}
{showContent.portfolio？：null}
{showContent.about？：null}
{showContent.things？：null}
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

我想你应该先尝试搜索答案。你可以检查你的代码框吗？如果你能看到，我做了一些编辑。如果不让我知道，我会贴在这里。我看不到编辑。谢谢你的粘贴！

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