滚动到reactjs中的其他组件

代码如下：

组件a.js 按钮在此组件中

import React from "react";
import { Container, Button, Typography } from "@material-ui/core";

const ComponentA = () => {
  return (
    <Container style={{ border: "1px solid red" }}>
      <Typography variant="h6">
        Suspendisse aliquet sed turpis ut tristique. Aenean ullamcorper tellus
        mollis dui tincidunt, et tristique tellus malesuada. Vivamus vel ipsum
        et justo bibendum tincidunt id vitae massa. Integer efficitur tristique
        dolor, vitae luctus felis malesuada sed. Quisque mattis aliquet
        faucibus. Aenean erat purus, sodales sit amet mollis eget, vehicula a
        sapien. Nulla sit amet mauris quis ligula consequat aliquam. Maecenas
        vitae lectus nec veli
      </Typography>
      <Button variant="outlined" size="large" color="primary">
        Hello
      </Button>
    </Container>
  );
};

export default ComponentA;

从“React”导入React；
从“@material ui/core”导入{容器、按钮、排版}；
常量组件A=（）=>{
返回(
悬钩子被称为turpis ut tristique.Aenean ullamcorper tellus
这是一个很好的例子，它是一个很好的例子
这是我生命中最重要的时刻。整体效率
多洛，马利苏达猫的生命。奎斯克·马蒂斯·阿利奎特
福西布斯。埃涅亚埃拉特普卢斯，苏打水，阿梅特莫利斯埃吉特，车辆a
智者。无主无主。无主无主。无主无主
维塔莱克塔斯内维利酒店
你好
);
};
导出默认组件a；

组件b.js 只是一些内部有代码的组件

import React from "react";
import { Container, Button, Typography } from "@material-ui/core";

const ComponentB = () => {
  return (
    <Container>
      <Typography variant="h6">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor
        felis vel odio laoreet luctus. Integer id tempus arcu, sollicitudin
        maximus augue. Mauris porttitor feugiat mattis. Praesent mattis neque a
        risus volutpat, sit amet sodales tortor efficitur. In pharetra nunc ac
        sem mattis pretium. Sed vitae efficitur magna. Quisque nec tellus vel
        elit vulputate imperdiet. Donec auctor nunc ut varius cursus.
        Suspendisse potenti. Sed sit amet feugiat lectus. Ut sit amet turpis vel
        ex egestas efficitur pellentesque et purus. Proin congue velit lectus,
        eu ullamcorper magna dignissim sed. Curabitur vitae neque a ipsum
        eleifend tempor. Ut nec turpis interdum, dictum lorem id, porttitor
        sapien. Integer finibus interdum orci eget pharetra. Sed a metus sed
        erat tristique posuere. Pellentesque in ultricies tortor. Fusce posuere
        purus sem, eget posuere dolor lacinia id. Integer tortor leo,
        condimentum sed maximus non, semper et felis. Etiam blandit lacus eget
        ante placerat blandit. Interdum et malesuada fames ac ante ipsum primis
        in faucibus. Maecenas pulvinar in felis vitae placerat. Maecenas
        ultrices ex ac quam accumsan aliquam. Phasellus sit amet est finibus,
        cursus tellus sit amet, ultrices felis. Morbi a cursus odio. Mauris et
        egestas ante. Morbi lobortis lectus dignissim lacus fermentum congue.
        Vivamus at libero at nisi laoreet consequat sit amet id dolor. Nullam
        venenatis dictum nulla, eget fermentum felis congue et. Cras vehicula,
        odio nec finibus feugiat, libero urna viverra augue, sed mollis tortor
        felis eu lacus.
      </Typography>
    </Container>
  );
};

export default ComponentB;

从“React”导入React；
从“@material ui/core”导入{容器、按钮、排版}；
常量组件B=（）=>{
返回(
Lorem ipsum dolor sit amet，奉献精英。Nunc拍卖人
felis vel odio laoreet luctus.整数id tempus arcu，sollicitudin
马克西姆斯·奥古斯。莫里斯·波特提托·费吉亚·马蒂斯。帕雷森特·马蒂斯·内克
risus Volivepat，坐在pharetra nunc ac的amet sodales tortor efficitur
这是一个非常好的例子，它能有效地提高工作效率
精英暴君统治着饮食。Donec auctor nunc ut varius cursus。
有可能的是，我坐的是封建主义者的票，但我坐的是turpis的票
以有效的方式进行清洁和清洁，
欧盟大型贵宾酒店
临时性的，临时的，临时的，临时的，临时的
智者。一个完整的内部完成，或一个完整的内部完成
埃拉特·特里斯蒂克·波苏尔，《侵权法》中的佩伦茨克·福斯·波苏尔
purus sem，eget posuere dolor lacinia id.整数tortor leo，
调味品是一种非常美味的调味品
术前准备术前准备术前准备术前准备
在《福西布斯》中。在《费利斯·维塔普莱斯特拉特》中，梅塞纳斯·普尔维纳尔。梅塞纳斯
最后一步是积累，最后一步是收获，
泰勒斯坐在阿梅特，猫咪坐在阿梅特，莫比坐在阿梅特，莫里斯坐在阿梅特
在发酵粥中添加糖浆。
尼西·拉奥里特·康斯奎特·阿梅特·多洛的自由之家的万岁
白花蛇麻，
奥迪奥·内克·菲尼布斯·费吉亚特、维韦拉·奥古斯自由党、塞德·莫利斯·托托
费利斯·尤拉克斯。
);
};
导出默认组件B；

组件c.js 单击ComponentA中的按钮时要查看的容器

import React from "react";
import { Container, Button, Typography } from "@material-ui/core";

const ComponentC = () => {
  return (
    <Container style={{ backgroundColor: "blue" }}>
      <Typography variant="h6">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor
        felis vel odio laoreet luctus. Integer id tempus arcu, sollicitudin
        maximus augue. Mauris porttitor feugiat mattis. Praesent mattis neque a
        risus volutpat
      </Typography>
    </Container>
  );
};

export default ComponentC;

从“React”导入React；
从“@material ui/core”导入{容器、按钮、排版}；
常量组件C=（）=>{
返回(
Lorem ipsum dolor sit amet，奉献精英。Nunc拍卖人
felis vel odio laoreet luctus.整数id tempus arcu，sollicitudin
马克西姆斯·奥古斯。莫里斯·波特提托·费吉亚·马蒂斯。帕雷森特·马蒂斯·内克
奥里萨帕特酒店
);
};
导出默认组件c；

App.js

import "./styles.css";
import ComponentA from "./components/ComponentA";
import ComponentB from "./components/ComponentB";
import ComponentC from "./components/ComponentC";
export default function App() {
  return (
    <>
      <ComponentA />
      <ComponentB />
      <ComponentC />
    </>
  );
}

导入“/styles.css”； 从“/components/ComponentA”导入组件A； 从“/components/ComponentB”导入组件B； 从“/components/ComponentC”导入ComponentC； 导出默认函数App（）{ 返回( ); } 我的问题： 这不是我的原始代码，但结构与我发布的类似。我在第一个组件中有一个按钮，我想要的是它将向下滚动到最后一个组件。有什么方法可以实现它吗？我还希望它有平滑滚动时，滚动到最后一个组件。谢谢你的帮助

---

以下是我使用createRef（）找到的解决方案

App.js（这是父组件）正如您在这里看到的，当我单击按钮时，scrollDiv被声明并传递给我想要看到的组件，scrollSmoothHandler被传递给按钮所在的组件

import "./styles.css";
import React, { Component, createRef } from "react";
import ComponentA from "./components/ComponentA";
import ComponentB from "./components/ComponentB";
import ComponentC from "./components/ComponentC";
export default function App() {
  const scrollDiv = createRef();
  const scrollSmoothHandler = () => {
    scrollDiv.current.scrollIntoView({ behavior: "smooth" });
  };
  return (
    <>
      <ComponentA toScroll={scrollSmoothHandler} />
      <ComponentB />
      <ComponentC scrollDiv={scrollDiv} />
    </>
  );
}

导入“/styles.css”； 从“React”导入React，{Component，createRef}； 从“/components/ComponentA”导入组件A； 从“/components/ComponentB”导入组件B； 从“/components/ComponentC”导入ComponentC； 导出默认函数App（）{ const scrollDiv=createRef（）； 常量scrollSmoothHandler=（）=>{ scrollDiv.current.scrollIntoView（{behavior:“smooth”}）； }; 返回( ); } 对于组件a.js（刚刚将scrollSmoothHandler传递给按钮的onClick函数）

你好

对于我的组件c.js（这是我希望在单击按钮时看到的容器）。如您所见，ref被添加到容器中

import React, { forwardRef, useRef } from "react";
import { Container, Button, Typography } from "@material-ui/core";

const ComponentC = ({ scrollDiv }) => {
  return (
    <Container ref={scrollDiv} style={{ backgroundColor: "blue" }}>
      <Typography variant="h6">
       //Code here
      </Typography>
    </Container>
  );
};

export default ComponentC;

import React，{forwardRef，useRef}来自“React”；
从“@material ui/core”导入{容器、按钮、排版}；
常量组件C=（{scrollDiv}）=>{
返回(
//代码在这里
);
};
导出默认组件c；

请参见此问题

import React, { forwardRef, useRef } from "react";
import { Container, Button, Typography } from "@material-ui/core";

const ComponentC = ({ scrollDiv }) => {
  return (
    <Container ref={scrollDiv} style={{ backgroundColor: "blue" }}>
      <Typography variant="h6">
       //Code here
      </Typography>
    </Container>
  );
};

export default ComponentC;