Как сделать компонент вкладки пользовательского интерфейса материала автоматически прокручиваемым в react

#reactjs #tabs #material-ui

#reactjs #вкладки #материал-пользовательский интерфейс

Вопрос:

Я использую компоненты material design UI react для интерфейса в react, у меня возникают проблемы с вкладками, я хочу, чтобы при нажатии на любую вкладку с упоминанием страница автоматически прокручивалась немного вниз, прямо сейчас, когда я нажимаю на эту вкладку, страница не прокручивается

Я попытался с помощью модуля прокрутки реакции, но он не дает результата, вместо этого он переводит меня в конец страницы ,

демонстрационный пример: https://codesandbox.io/s/yko6x8r0wz

При нажатии на PageOne в разделе вкладки, он должен немного прокручиваться вниз

Ответ №1:

Используйте вариант = прокручиваемый.

 <Tabs
  value={false}
  indicatorColor="primary"
  textColor="primary"
  variant="scrollable"
  scrollButtons="auto"
>
 

Это должно сработать. Спасибо.

Ответ №2:

Когда я создавал SPA, я использовал эту библиотеку: react-router-hash-link. У него есть хэш-ссылка, которая управляет плавной прокруткой по разделам.

Это учебное пособие с примерами ссылок.

Вы могли бы определить новую ссылку в разделе вкладки таким образом:

 import { HashLink as Link } from 'react-router-hash-link';
<Link to="/menu#section-a">Link to Section A</Link>
 

Я надеюсь, хотя, если это не та же библиотека, она может вам помочь 🙂