javascript - React 同一组件的多个实例接收不同的数据

Question

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

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

请查看我的数据结构，其中数据在状态内进行管理 - 这只是一个原型(prototype)，所以目前可以使用。

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

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