Javascript 使用Redux为ReactJS中的每个数据块创建新div

我在React中使用redux表示数据。它为每个数据块提供一个DIV。我想分开每个div，在每个div之间留出空间，并用每个div创建一张手风琴卡。我不确定这样做的最佳方式，并将其与redux一起使用。下面是代码块

import React, { Component } from "react";
// import ReactDOM from "react-dom";
import './reasearchPage.style.scss'
import { connect } from 'react-redux'
// import { Card, Feed } from 'semantic-ui-react'
import {fetchDataSuccess} from "../../Redux/actions/dataAction";


class ResearchPage extends Component {
    componentDidMount() {
        this.props.fetchDataSuccess();
    }

    render() {
        const { data } = this.props;

        return (
            <div>
                <h1 className='page-title'>Record MetaData</h1>

                {data.map(({ id, _index, ContentTypeId}) => (
                    <div key={id} className="query-div">
                        <h3>{_index}</h3>
                        <p>{ContentTypeId}</p>
                    </div>
                ))}
            </div>
        );

    }
};

const mapStateToProps = state => ({
    data: state.data.data
});

const mapDispatchToProps = dispatch => ({
    fetchDataSuccess: () => fetchDataSuccess(dispatch)
});
export default connect(mapStateToProps, mapDispatchToProps)(ResearchPage);

import React，{Component}来自“React”；
//从“react dom”导入react dom；
导入“./reasearchPage.style.scss”
从“react redux”导入{connect}
//从“语义ui反应”导入{Card，Feed}
从“./../Redux/actions/dataAction”导入{fetchDataSucces}”；
类ResearchPage扩展组件{
componentDidMount（）{
this.props.fetchDataSucces（）；
}
render（）{
const{data}=this.props；
返回(
记录元数据
{data.map（{id，_index，ContentTypeId}）=>(
{u索引}
{ContentTypeId}

))}
);
}
};
常量mapStateToProps=状态=>({
数据：state.data.data
});
const mapDispatchToProps=调度=>({
FetchDataSucces:（）=>FetchDataSucces（调度）
});
导出默认连接（mapStateToProps、mapDispatchToProps）（研究页面）；

我检查了文档，如果您使用的是上述库，您应该定义手风琴并在其中使用映射功能，然后将数据传递给卡

 <Accordion>
    {data.map(( id, _index, ContentTypeId) => (
  <Card>
    <Card.Header>
      <Accordion.Toggle as={Button} variant="link" eventKey="0">
        {id}
      </Accordion.Toggle>
    </Card.Header>
    <Accordion.Collapse eventKey="0">
      <Card.Body>Hello! I'm the body</Card.Body>
    </Accordion.Collapse>
  </Card>))}
</Accordion>

{data.map（（id，_index，ContentTypeId）=>(
{id}
你好！我是尸体
))}

我不太确定，但我想你要做的是创建一列（或一行），如果我理解正确的话，它的子组件在它们之间有一个特定的空间，对吗？这是我最初的想法，但是，我不想严格地将数据列表化。我想样式，使它更像一个手风琴面板与一张卡片。然而，在查看文档和相关信息时，我似乎无法理解它在向其传递数据方面的用途。您能否举例说明您试图实现的目标以及您提到的文档？那么我可以问一下你在传递数据或制作手风琴方面有什么问题吗？是的，请稍等。让我们来谈谈。