[英]Creating a new div for each data block in ReactJS using Redux
I am representing the data using redux in React.我在 React 中使用 redux 表示数据。 It gives a DIV for each block of data.
它为每个数据块提供一个 DIV。 I would like to separate each div, space in between each one, and create an accordion card with each div.
我想分隔每个 div,每个 div 之间有空格,并为每个 div 创建一张手风琴卡。 I am not sure the best way of going about something like this, and using it with redux.
我不确定进行此类操作的最佳方法,并将其与 redux 一起使用。 The block of code is below.
代码块如下。
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);
i checked document and if you're using mentioned library you should define the accordion and use map function inside it and pass the data to the card我检查了文档,如果您使用的是提到的库,您应该定义手风琴并在其中使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.