React 同一组件的多个实例接收不同的数据答案

【问题标题】：React Multiple instances of same component receive different dataReact 同一组件的多个实例接收不同的数据
【发布时间】：2018-06-28 08:58:12
【问题描述】：

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

组件<LargeImageContent />是要多次渲染的组件。

请查看我在状态内管理数据的数据结构 - 这只是一个原型，所以现在可以使用。

我对渲染同一组件的多个实例的最初想法是通过数据.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>
        )
    }
}

这里是 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>
        )
    }
}

【问题讨论】：

你想分享更多关于这个问题的信息吗？ “接收不同的数据”不是很具有描述性。
查看状态中呈现的数据示例。
I need the components to receive the correct data for each 是什么意思，你想为第一个实例发送一个 obj1，为第二个实例发送一个 obj2，依此类推或其他什么？

标签： javascript reactjs

【解决方案1】：

使用您建模的数据并在 LargeImageContent 组件中使用它，您应该这样做：

        <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>

【讨论】：