• Как по нажатию на кнопку перейти на другую страницу в React?

    @lamborjiny Автор вопроса
    Я нуждающийся в помощи начинающий программист)
    Друзья, наконец то прояснение наступило. Ниже пример реализации:

    Импортируйте в основной компонент App свои страницы, у этом случае это FirstPageComponent и SecondPageComponent
    import React, { Component } from "react";
    import FirstPageComponent from "./FirstPageComponent.js";
    import SecondPageComponent from"./SecondPageComponent";
    import { BrowserRouter as Router, Route, Link } from "react-router-dom";

    Дальше делайте привязку этих страниц в App с помощью react-router следующим образом
    function App (){
      return(
        <Router>
          <div className="App">
            <Route path="/" exact exact component={FirstPageComponent}
            }/>
            <Route path="/second" exact component={SecondPageComponent}/>
         </div>
         </Router>
      )
    }
    export default App;


    Дальше, желательно в отдельных файлах сделать привязку к соответствующим кнопкам на ваших страницах следующим образом
    import React from "react";
    import ReactDOM from "react-dom";
    
     class OnSecondPageButton extends React.Component {
        onclick () {
          window.location.assign('http://localhost:3000/second/');
        }
    
        render() {
          return (<a onClick={(e) => this.onclick(e)}><i className="fas fa-chart-bar"></i></a>);
        }
      }
    export default Statistics_button;
    
    import React from "react";
    import ReactDOM from "react-dom";
    
     class Back_button extends React.Component {
        onclick () {
          window.location.assign('http://localhost:3000/');
        }
    
        render() {
          return (<button  onClick={(e) => this.onclick(e)}>Back </button>);
        }
      }
    export default Back_button;


    Потом не забываем импортировать свои кнопочки и вызвать в нужных местах Ваших страничек.

    Как то так. Спасибо за поддержку. Успехов Вам)
    Ответ написан
    1 комментарий
  • Как сделать динамически изменяемые размеры фотографии?

    pavel_ataykin
    @pavel_ataykin
    Верстаю и программирую всякое.
    Такая раскладка называется "Masonry Layout". Соотвественно самый простой способ - это использовать готовые плагины для react например этот: https://www.npmjs.com/package/react-masonry-component
    Если нужно разработать "свой" механизм, то гугли по названию раскладки.
    P.S. Если не требуется соблюдать иерархию картинок, то можно использовать css свойство column-count пример реализации можно посмотреть здесь: https://w3bits.com/css-masonry/
    Ответ написан
    Комментировать