Полный демонстрационный код здесь

Когда я создаю веб-сайты-портфолио для себя и друзей, я всегда хочу избегать жесткого кодирования проектов и информации для каждого из них и вместо этого использую более динамичный способ управления данными, который до недавнего времени не разработал. Это система, которую я разработал для динамического создания экземпляров веб-страниц и их содержимого из единой структуры данных 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.