Блог

Я новичок в react, и у меня возникла проблема, у меня есть слайдер, созданный компонентом

 import React from 'react'
import NextEvent from '../nextEvent/NextEvent'
import './slider.css';


function Slider(props) {
    const {id, image, sub_title, title} = props;

 
    return (
        <main id='slider'>
             <div className="slide" key= {id}>
                        <div className="slide-image">
                            <img src={image} alt="slider-background"/>
                        </div>
                        <h1>{title} </h1>
                         <h5>...{sub_title}</h5>
            
                    </div>
                  <div className="event-countdown">
                        <NextEvent/>
                    </div>
        </main>
 

    )
    }

export default Slider
 

Мне нужно, чтобы этот компонент баннера был почти на всех моих страницах, и на каждой из страниц он содержит
разную информацию (изображение, заголовок, подзаголовок)

серверный специалист отправил api, и я использовал, но проблема в том, что, если я использую api для компонента напрямую, все страницы будут иметь одинаковую информацию о компоненте баннера, что не то, что я хочу, также использование API на домашней странице казалось неправильнымдля этого я создал еще один компонент, который собирает Api, а затем добавил этот новый компонент на свою домашнюю страницу.

теперь мой вопрос:

1. правильно ли я поступил?
2. если это правильно, означает ли это, что я должен создавать новые соответствующие компоненты, которые будут получать API для каждой страницы, на которой я хочу отобразить баннер, так же, как я сделал для домашней страницы?
3. должен ли я, как серверный специалист, создавать разные API для каждой из страниц, на которых должен отображаться компонент
4. если нет, пожалуйста, помогите мне с эффективным способом, которым я могу вводить данные, поступающие из серверной части, в компонент, который будет отображаться на разных страницах с разными данными

это новый компонент, который я создал для использования API

 import React, {useState, useEffect } from 'react'
import NextEvent from '../../components/nextEvent/NextEvent'
import axios from "axios";
import '../../components/slider/slider.css';



const sliderUrl = "*************************************"

function HomeSlider(props) {
    
    const [sliderData, setSliderData] = useState([]);
    const { image, sub_title, title} = props;

    const getSliderContents = async () => {
        const response = await axios.get(sliderUrl);
        const content =  response.data;
        setSliderData(content);
        
        
    }

    useEffect(() => {
        getSliderContents();
    }, [])

    
    // console.log("slider", sliderData)
   if(sliderData) {
    return (
        <main id='slider'>
            {sliderData.map((item) => {
                

                    return (
                        <div className="slide" key= {item.id}>
                        <div className="slide-image">
                            <img src={item.image} alt="slider-background"/>
                        </div>
                        <h1>{item.title} </h1>
                         <h5>...{item.sub_title}</h5>
            
                    </div>
                    )
                
            })}
          
                    <div className="event-countdown">
                        <NextEvent/>
                    </div>
        </main>
    )
   }
}

    


export default HomeSlider
 

это домашняя страница, на которой я ее отобразил

     function HomePage() {
    return (
        <div>
             <NavBar/>
            <SecondaryMenu/>
            <HomeSlider />
            <FeaturedBox />

 

Пожалуйста, любая помощь приветствуется, у меня есть поиск по всему, но никто не объясняет, как отображать
компонент с разными данными на разных страницах

Итак, я просто хотел вернуться к этому, я решил, что мне нужно настроить точку обслуживания, где я вызываю api, а затем использую конечные точки на каждой странице по желанию