Javascript 同一组件的多个实例接收不同的数据

我有一个视图，我需要多次渲染同一组件并保持特定的顺序

组件

是要多次渲染的组件

请参阅我的数据结构，其中数据在状态内进行管理-这只是一个原型，所以现在可以使用

渲染同一组件的多个实例时，我最初的想法是通过数据

.map（）

，但是，这将一个接一个地渲染组件

我需要组件接收每个组件的正确数据，并维护下面所示的结构

这是我的布局容器：

export default class Layout extends Component {
    state = {
        data: {
            largeImageObjs: [
                {
                    obj1: {
                        image: '',
                        heading: 'Hi there',
                        text: 'Perpetua efficiantur in quo, vix cu stet denique repudiandae, sonet zril te usu.',
                        btnLabel: 'Shop now'
                    },
                    obj2: {
                        image: '',
                        heading: 'Different Heading',
                        text: 'Efficiantur in quo, vix cu stet denique repudiandae, sonet zril te usu.',
                        btnLabel: 'Order now'
                    }
                }
            ]
        }
    }

    render() {
        return (
            <div className="layout-wrap">
                <Header />
                <LargeImageContent data={this.state.data} />
                <SmallPanelContent />
                <FourColContent />
                <LargeImageContent data={this.state.data} />
                <SmallPanelContent />
                <GridCarousel />
                <LargeImageContent data={this.state.data} />
                <LargeImageContent data={this.state.data} />
                <LargeImageContent data={this.state.data} />
                <Footer />
            </div>
        )
    }
}

导出默认类布局扩展组件{
状态={
数据：{
大图像对象：[
{
obj1：{
图像：“”，
标题：“你好”，
文字：“永存于现状的效率，vix cu stet denique repudiandae，sonet zril te usu。”，
btnLabel:“立即购物”
},
obj2：{
图像：“”，
标题：“不同标题”，
文字：“Efficiantur in quo，vix cu stet denique repudiandae，sonet zril te usu.”，
btnLabel:“立即订购”
}
}
]
}
}
render（）{
返回(
)
}
}

以下是LargImageContent组件：

import React, {Component} from 'react';

import Button from '../Button';

import './index.scss';

export default class LargeImageContent extends Component {
    render() {
        const { data } = this.props;
        return (
            <div className="large-image-content-wrap">
                <div className="large-image-content">
                    <div className="large-image-content-body">
                        <h2>{data.heading}</h2>
                        <p>{data.text}</p>
                        <Button theme="button-primary" label={data.btnLabel} icon={'/svg/icons/arrow-right.svg'} />
                    </div>
                </div>
            </div>
        )
    }
}

import React，{Component}来自'React'；
从“../Button”导入按钮；
导入“/index.scss”；
导出默认类LargeImageContent扩展组件{
render（）{
const{data}=this.props；
返回(
{data.heading}
{data.text}

)
}
}

使用建模时的数据，并在大图像内容组件中使用它，您应该执行以下操作：

        <div className="layout-wrap">
            <Header />
            <LargeImageContent data={this.state.data.largeImageObjs[0].obj1} />
            <SmallPanelContent />
            <FourColContent />
            <LargeImageContent data={this.state.data.largeImageObjs[0].obj2} />
            <SmallPanelContent />
            <GridCarousel />
              ...
            <Footer />
        </div>

...

您想分享更多关于该问题的信息吗？“接收不同的数据”不是很具有描述性。请参见州内提供的数据示例。您所说的

是什么意思？我需要组件接收每个组件的正确数据
您想发送一个obj1作为第一个实例，发送一个obj2作为第二个实例，依此类推，还是其他什么？