Как сверстать такой пост?

Question

[ArturPetrov]

Хочу сделать такой пост:


При нажатии на кнопку "Read More" должна открываться страница "wordpress-restaurant-themes", а при нажатии на коментарии также открываеться эта страница но уже ее низ, тоесть там где находятся коментарии на странице.

Comments

[Петр Мухуров]

вам на фриланс

Answer 1

[hzzzzl]

прокидывать в компонент "wordpress-restaurant-themes" какой-нибудь проп, а в том компоненте в componentDidMount смотреть этот проп, и скроллить окно браузера до нужного элемента?
https://developer.mozilla.org/en-US/docs/Web/API/W...
как-то так должно сработать

--

ну или линковать на /themes/comments, и в компоненте проверять this.props.history.location, и так же скроллить через window.scrollTo()

Comments

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

Возможно, автор не слышал о существовании клиентского рутинга.

[ArturPetrov]

я понял что вы имели в виду, потому что читал в документации о window.scrollTo () и о componentDidMount но даже не представляю как слепить все это в работающий код, потому что мало практики, но хочеться выполнить задание, но понимаю что без помощи опытных програмистиов не обойтись

[hzzzzl]

ArturPetrov, если через create-react-app, то например

// App.js

import React from 'react'
import './App.css'
import { BrowserRouter, Link, Switch, Route } from 'react-router-dom'

class Post extends React.Component {
  componentDidMount() {
    if (this.props.location.pathname === '/post/comments') {
      this.scrollToComments()
    }
  }

  componentDidUpdate() {
    if (this.props.location.pathname === '/post/comments') {
      this.scrollToComments()
    }
  }

  scrollToComments() {
    const element = document.querySelector('#comments')
    element.scrollIntoView()
  }

  render() {
    return (
      <>
        <h1>Post</h1>
        <div>{new Array(100).fill(<p>long post</p>)}</div>
        <h2 id='comments'>Comments</h2>
        <div>{new Array(100).fill(<p>comment</p>)}</div>
      </>
    )
  }
}

function App() {
  return (
    <BrowserRouter>
      <div className='App'>
        <nav>
          <Link to='/post'>go to post</Link>
          <Link to='/post/comments'>go to comments</Link>
        </nav>
        <main>
          <Switch>
            <Route path='/post' component={Post} />
            {/*
              other routes
            */}
          </Switch>
        </main>
      </div>
    </BrowserRouter>
  )
}

export default App

[ArturPetrov]

hzzzzl, спасибо большое, еще хотел спросить у меня есть проект в который я буду помещать постер , но у меня там уже есть файл app.js вот как он выглядит:

import React, {Component} from "react";
import {
  BrowserRouter as Router,
  Route,
  Link
} from "react-router-dom";


import Header from "./components/headerComponent/header";
import Footer from "./components/headerComponent/footer";
import Homepage from "./components/pages/homePage";
import Products from "./components/pages/products";

import "./Assets/css/default.min.css";

class App extends Component {
    render() {
        return {
            <Router>
            <div className="App">
            <Header />
            
            Route exact path='/' component={Homepage} />
            Route exact path='/Products' component={Products} />
            
            <Footer />
            
            </div>
            </Router>
        };
    }
}

export default App;

и файл homepage.js:

import React, {Component} from 'react';

class Homepage extends Component {
    render(){
        return {
          <div className="wrap">
            
           <h1>
            Home Page Content
           </h1>
            
            <p>
           
            </p>
            
            
          </div>     
        };
    }
}

export default Homepage;

куда лучше поместить код что вы написали? в homepage.js или в мой app. js и прописать путь к нему? и в каком месте файла код поместить?