Блог

Итак, я пытаюсь изучить React, я работаю над проектом, в котором я хочу отображать статьи об автомобилях. У меня есть мой CarContext

 export const CarProvider = (props) => {
  const [cars, setCars] = useState([
    {
      name: 'Car1',
      img: car1,
      id: 1,
      info:
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum qui unde voluptate numquam aspernatur dolor sunt ducimus dolore nesciunt. Voluptate suscipit omnis velit maxime explicabo dicta at quo modi placeat',
    },
    {
      name: 'car2',
      img: car2,
      id: 2,
      info:
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum qui unde voluptate numquam aspernatur dolor sunt ducimus dolore nesciunt. Voluptate suscipit omnis velit maxime explicabo dicta at quo modi placeat',
    },
    {
      name: 'car3',
      img: car3,
      id: 3,
      info:
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum qui unde voluptate numquam aspernatur dolor sunt ducimus dolore nesciunt. Voluptate suscipit omnis velit maxime explicabo dicta at quo modi placeat',
    },
  ]);
  return (
    <CarContext.Provider value={[cars, setCars]}>
      {props.children}
    </CarContext.Provider>
  );
};
 

App.js

 function App() {
  return (
    <CarProvider>
      <Router>
        <div className='App'>
          <Header />
        </div>
        <Switch>
          <Route path='/articles' exact component={Articles} />
          <Route path='/articles/:id' component={SpecificArticle} />
          <Route path='/' exact component={Home} />
        </Switch>
        <Footer />
      </Router>
    </CarProvider>
  );
}
 

Я создал компонент под названием CarArticles, в котором я отображаю все статьи (имя и img) и кнопку.

 import { CarContext } from '../CarContext';

const CarArticles = () => {
  const [cars, setCars] = useContext(CarContext);
  return (
    <div>
      {cars.map((car) => (
        <Card
          name={car.name}
          img={car.img}
          key={car.id}
          id={car.id}
        />
      ))}
    </div>
  );
};

export default CarArticles;

 

 const Card = ({ name, img, id }) => {
  return (
    <div>
      <h3>{name}</h3>
      <img src={img} alt='img of car'/>
      <Link to={`/articles/${id}`}>
        <button>read more</button>
      </Link>
    </div>
  );
};

export default Card;

 

Когда я нажимаю на одну из кнопок, отображается конкретная статья компонента со статическим текстом «Вот страница конкретной статьи об автомобиле в зависимости от того, какую кнопку вы нажали»

 const SpecificArticle = () => {

  return (
    <div>
      <h3>
        <h2>
          "Here's the specific Car article page depending on which button you
          clicked"
        </h2>
      </h3>
    </div>
  );
};

export default SpecificArticle;

 

Мой вопрос в том, как мне получить конкретную информацию об автомобиле внутри ‘SpecificArticle? Если я нажму на статью 1, я хочу, чтобы компонент отображал информацию из object1… и если я нажму на статью 2, мне нужна информация из object2, например, имя img и информация…

Доступ к параметрам URL осуществляется с помощью useParams():

 import {useParams} from "react-router-dom";

const SpecificArticle = () => { 
  const params  = useParams();
  const id = params.id;
  
  return (
    <div>This is the id : {id}</div>
  )
 }
   

Поскольку вы хотите использовать поставщик контекста, он должен быть определен как

 export const cars = {
    'Car1': {
      name: 'Car1',
      img: car1,
      id: 1,
      info:
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum qui unde voluptate numquam aspernatur dolor sunt ducimus dolore nesciunt. Voluptate suscipit omnis velit maxime explicabo dicta at quo modi placeat',
    },
    'car2': {
      name: 'car2',
      img: car2,
      id: 2,
      info:
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum qui unde voluptate numquam aspernatur dolor sunt ducimus dolore nesciunt. Voluptate suscipit omnis velit maxime explicabo dicta at quo modi placeat',
    },
    'car3': {
      name: 'car3',
      img: car3,
      id: 3,
      info:
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum qui unde voluptate numquam aspernatur dolor sunt ducimus dolore nesciunt. Voluptate suscipit omnis velit maxime explicabo dicta at quo modi placeat',
    },
};

export const CarsProvider = React.createContext(
  cars.Car1 // default value
); 

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

useParams

Рассмотрите возможность использования параметров использования маршрутизатора react.

Пример:

 const SpecificArticle = () => {
  const { id } = useParams();

  return (
    <div>
      ...
    </div>
  );
};
 

CarContext

 // create CarContext using an initial object with 'cars' being an empty array
const CarContext = createContext({cars: []})

// put cars data into the context provider
const cars = []; // array of data
<CarContext.Provider value={cars} />

// access the cars using the context anywhere inside the CarContext tree
const { cars } = useContext(CarContext);
 

На самом деле это довольно просто, пожалуйста, изучите, как использовать контекст react, который «обеспечивает способ передачи данных через дерево компонентов без необходимости вручную передавать реквизиты на каждом уровне».