Javascript 如何在reactjs中克隆媒体的主页布局？

我目前正在尝试使用reactjs创建一个中等克隆。我现在想知道如何创建主页的“特色”部分

我计划使用一个新闻API来获取我的所有内容，并将其映射到相应的布局中。考虑到我的能力，我很清楚，“特色”部分中内容的垂直和水平布局都需要单独的组件，因为其中一个（水平组件）在“基于阅读”部分中得到重用。因此，我现在的问题是，如何将获取的数据映射到这样的布局中？如果我使用HTML手动创建文章的每个块，那么这样的布局对我来说会很容易，这样我就可以分别设计（分配CSS类）每个块，而不是设计在dom呈现时生成的块。下面是我到目前为止所做的

 useEffect(()=>{

        const fetch= async()=>{

            try{
                setLoading(true)
                const response= await axios(url)
                const results= response.data
                // console.log(results.articles.slice(0,5))
                setData(results.articles.slice(0,5))
                setLoading(false)
            }
            catch{
                setLoading(false)
            }  
        }
        fetch()

    },[url])


    const getData=(from,to)=>{
        const copiedData=[...data]
        const sliced= copiedData.slice(from,to)
        return sliced;
    }



return(
    <>
    <Categories onClick={fetchCategory}/>
    <section className={classes.featured}>
   //featured_vertical
    <Vertical postArray={getData(0,1)}  loading={isLoading}/>
    <div className={classes.featured_horizontals}>
        <Horizontal  postArray={getData(1,3)} />
    </div>
    <Vertical postArray={getData(3,4)}  loading={isLoading}/>
    </section>
    </>
)
}

useffect（（）=>{
const fetch=async（）=>{
试一试{
设置加载（真）
常量响应=等待axios（url）
const results=response.data
//console.log（results.articles.slice（0,5））
setData（结果.文章.切片（0,5））
设置加载（错误）
}
抓住{
设置加载（错误）
}  
}
fetch（）
}，[url]）
const getData=（从，到）=>{
常量copiedData=[…数据]
常量切片=复制数据切片（从、到）
返回切片；
}
返回(
//垂直的
)
}

---

我希望每个片段都能被传递到它们的组件中，但我最终只得到了要显示的第一个垂直组件。

我不确定我是否理解——如果可以用HTML创建它，那么就在组件中使用该HTML，并传递它需要作为道具呈现的数据。是什么具体问题让你绊倒了？这正是我的意图，但我似乎无法成功地将提取的数据拼接到相应的组件中。您对数据有什么具体问题？getData函数设法将存储在状态中的提取数据仅拼接到第一个垂直组件中。我不知道这是一个状态突变问题还是什么。你有没有验证过你的getData函数做了你认为它做的事情？你的原始数据呢？等等：检查你的假设。我不确定我是否理解——如果你能用HTML创建它，那么在你的组件中使用HTML，并传递它需要作为道具呈现的数据。是什么具体问题让你绊倒了？这正是我的意图，但我似乎无法成功地将提取的数据拼接到相应的组件中。您对数据有什么具体问题？getData函数设法将存储在状态中的提取数据仅拼接到第一个垂直组件中。我不知道这是一个状态突变问题还是什么。你有没有验证过你的getData函数做了你认为它做的事情？你的原始数据呢？等等：检查你的假设。