Полный демонстрационный код здесь
Когда я создаю веб-сайты-портфолио для себя и друзей, я всегда хочу избегать жесткого кодирования проектов и информации для каждого из них и вместо этого использую более динамичный способ управления данными, который до недавнего времени не разработал. Это система, которую я разработал для динамического создания экземпляров веб-страниц и их содержимого из единой структуры данных JSON, что упрощает и упрощает редактирование информации в дальнейшем.
Организуйте данные
Сначала я организовал контент, который хотел отобразить в структуре данных JSON, следующим образом:
export const projects = [ { "url": "project1", "imgs": [p1, p2, p3], "cover": p1, "text": "this is my first project and i'm so proud of it." }, { "url": "project2", "imgs": [p4, p5,p6], "cover": p4, "text": "now this one will blow your mind even more than the past." } ]
Вы можете настроить его, включив в него нужные вам поля. Обратите внимание, что я включил не только текст и массив изображений для отображения на каждой странице, но и настраиваемый URL.
Создать обзорную страницу
В моем примере я структурировал сайт так, чтобы у него была страница портфолио с изображением для представления каждого проекта, которое затем ссылается на специальную страницу с дополнительной информацией об этом конкретном проекте.
На странице портфолио я импортировал структуру JSON, а затем сопоставил ее следующим образом:
{projects.map((value, index) => { return <a key={index} href={"/"+value["url"]}><img className="portfolio-img" src={value["cover"]} /></a> })}
Это динамически превращает титульную страницу для каждого проекта в галерею и связывает каждое изображение с его собственной выделенной страницей проекта.
Настройте React Router для получения идентификатора проекта
Я использую React Router в App.js для перенаправления URL-адресов на соответствующие страницы. В React Router есть функция, которая позволяет передавать параметры URL-адреса компоненту в качестве свойств, которые я использую, чтобы сообщить странице проекта, какой проект он должен отображать. JSX моего App.js следующий:
<Router> <Switch> <Route exact path='/' exact component={Portfolio} /> <Route exact path='/:id' exact component={Project} /> <Route component={ErrorPage} /> </Switch> </Router>
Параметр url обозначается двоеточием после обратной косой черты, а следующее слово - это само имя переменной, я решил использовать id, но вы можете сделать это как хотите. Просто помните, что это имя переменной, которое вам нужно будет использовать для доступа к опоре в компоненте.
Визуализировать страницу проекта на основе параметра url
Наконец, мы визуализируем содержимое страницы проекта на основе параметра url, который сообщает нам, какую часть информации JSON использовать. Код страницы моего проекта следующий:
function Project() { const [imgs, setImgs] = useState([]); const [text, setText] = useState(""); const [id, setId] = useState(useParams().id); useEffect(() => { for(var i = 0; i < projects.length; i++) { var obj = projects[i]; if(obj.url == id){ setImgs(obj.imgs); setText(obj.text); } } }); return ( <div className="content"> <div className="page-title">{id}</div> <div className="project-text">{text}</div> {imgs.map((value, index) => { return <img key={index} className="project-img" src={value} /> })} </div> )}
Когда компонент монтируется, запускается useEffect, то есть когда я просматриваю структуру JSON, нахожу объект в списке с соответствующим URL-адресом параметра url, полученного страницей, а затем сохраняю соответствующий контент в состоянии . Затем JSX использует эти переменные состояния при отображении содержимого страницы.
Обратите внимание, что я получил доступ к своему параметру url с помощью useParams (). Id. Убедитесь, что любое имя переменной, которое вы использовали в App.js, совпадает с тем, которое вы используете для доступа к параметру, в моем случае id.
Вот и все!
Это подход, который я разработал для динамического отображения страниц. Его можно расширить намного больше, чем я организовал свой JSON, чтобы контролировать еще большую часть сайта. Я также сделал полное демо-репозиторий, которым вы можете пользоваться.
Если вы нашли это полезным, вы можете подписаться на меня в Instagram и GitHub, чтобы быть в курсе моих последних работ.
В настоящее время я учусь в Техасском университете в Остине, изучаю компьютерные науки и студийное искусство. Более подробную информацию обо мне и моей работе вы можете найти на моем сайте - abhi.work.