使用 Redux 為 ReactJS 中的每個數據塊創建一個新 div

Question

我在 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);

Answer 1

我檢查了文檔，如果您使用的是提到的庫，您應該定義手風琴並在其中使用 map function 並將數據傳遞給卡

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