Как написать такой JS код на React?

Question

[hulktoster]

Есть кнопка которая опускает страницу к определенным координатам:

<div class="container">
<div class="down">
    <div class="down-text">DOWN
    <button onclick="topFunction2Section()" class="myBtn2" title="Down">&#10095;</button>
    </div>
</div>
</div>


<style>
    .container{
        background: yellow;
        height: 3000px;
        width: 100%;
    }
</style>


<script>
function topFunction2Section() {
           document.body.scrollTop = 940;
           document.documentElement.scrollTop = 940;
}
    </script>

Comments

[edward_freedom]

что именно не получается?

[hulktoster]

edward_freedom, я только начал изучать React, пока не получается вывести на страницу больше чем "Hello world" хотел наглядно увидеть разницу, между JS и React, возможно несколько примеров увижу и я начну понимать. Пока что изучил React по урокам ютуб Гоши Дударя. Но там он все уроки преподавал React на основе todolist.А хочеться увидеть на примере какой то части сайта

[edward_freedom]

hulktoster, так ты даже код, который пробовал написать не выложил

[edward_freedom]

hulktoster, изучать по примерам это как? Надо изучать документацию, а не примеры. Что ты будешь делать, когда примеров не будет и никто халявно помогать не будет?

[hulktoster]

edward_freedom, документация без практики плохо усваивается, я это понял еще когда изучал JS.Прочитал книгу, ничего почти не понял, а потом начал писать свой код по аналогу из других сайтов и уже лучше стал понимать.

[edward_freedom]

hulktoster, именно что без практики, то что за тебя напишут простейший код, ничем тебе не поможет

[Антон Спирин]

hulktoster, судя по истории ваших вопросов предыдущий ответ вам вообще ничем не помог, хотя в обоих задачах используются одни и те же приемы и эта задача гораздо легче.

Answer 1

[0xD34F]

const ScrollButton = props => {
  const onClick = () => window.scrollTo({
    top: props.scrollTo,
    behavior: 'smooth',
  });

  return (
    <div className="down" style={{ top: `${props.top}px` }}>
      Scroll to {props.scrollTo}
      <button onClick={onClick}>&#10095;</button>
    </div>
  );
};

const App = () => (
  <div className="container">
    <ScrollButton scrollTo={500} top={50} />
    <ScrollButton scrollTo={1000} top={100} />
    <ScrollButton scrollTo={2000} top={200} />
  </div>
);

.down {
  position: fixed;
}

https://jsfiddle.net/zm0x4ycj/

Comments

[hulktoster]

а как реализовать такой код?
Как реализовать такой JS фильтр который фильтрует товары по значениям свойств ассоциативного массива но на React?

[0xD34F]

hulktoster,

1. Если мне не изменяет память, вы этот вопрос (или очень похожий) уже задавали.

2. Зазывать отвечать на один вопрос в комментариях к ответу на другой НЕ НАДО. Никогда так больше не делайте.

[hulktoster]

ок, больше так не буду, но в том вопросе, совсем другой подход к поиску товаров, там была работа файла JS с файлом html а здесь работа файла JS с JSON.
Вот старая тема:
Как реализовать такой JS код на React?

[0xD34F]

hulktoster, не вижу никакого "совсем другого" подхода. А что до "там html здесь json" - так это и хорошо, раз у вас данные уже отделены от представления, переписать с использованием react'а будет проще и быстрее, чем в прошлый раз.