Question

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

组件<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>
        )
    }
}

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>

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

1 个答案: