我正在尝试动态更新项目列表，而不必重做一堆代码。
在安装组件时，我会这样做。
componentDidMount() {
{this.listAllActivities(this.props.items)}
}
listAllActivities函数在下面。我正在通过数组进行映射，将元素推入items数组，然后在完成后返回。
listAllActivities(arr){
let items = [];
var self = this;
const grouped = this.groupBy(arr, date => getDateServiceTab(date.date));
grouped.forEach(function(value, key) {
value.map((map) => {
items.push(<div className="row content-timeline" key={map.id}>
<div className="col-1 activityIcon tooltip2">{self.activityIcon(map.source.toString().toLowerCase())}
<div className="tooltiptext">{map.source.replace("_", " ")}</div>
</div>
<div className="col-11">
<span className="recentActivityTagHeader">{map.tag === undefined ? map.source : map.tag} <span className="smallGrey">({map.mtn === undefined ? "ACCT" : map.mtn.substr(map.mtn.length - 4)})</span></span>
<div className="recentActivityDescription">{map.source === "OCC_LL" || map.source === "OCC_AL" ? self.configureOCCCredit(map.description) : map.description}</div>
<div className="recentActivityDate">{styleDateTime(map.date)}</div>
</div>
</div>)
})
})
$('thisdiv').append(items).html()
return items;
}
然后我将<div id="thisdiv"></div>粘贴在需要更新此信息的位置。
如何使用函数中的项目数组中的项目更新thisdiv ID？
更新
import $ from 'jquery';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import acss from '../image/activity/acss.png';
import app from '../image/activity/app.png';
import chatbot from '../image/activity/chatbot.png';
import email from '../image/activity/email.png';
import icm from '../image/activity/icm.png';
import impact from '../image/activity/impact.png';
import ivr from '../image/activity/ivr.png';
import netace from '../image/activity/netace.png';
import network from '../image/activity/network.png';
import retail from '../image/activity/retail.png';
import sms from '../image/activity/sms.png';
import vision from '../image/activity/vision.png';
import web from '../image/activity/web.png';
import occ from '../image/activity/occ.png';
import plus from '../image/plus.png';
import minus from '../image/minus.png';
import { getDateServiceTab, styleDateTime } from "../GlobalFunctions";
class AccordionSection extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
{this.listAllActivities(this.props.items)}
}
groupBy(list, keyGetter) {
const map = new Map();
list.forEach((item) => {
const key = keyGetter(item);
const collection = map.get(key);
if (!collection) {
map.set(key, [item]);
} else {
collection.push(item);
}
});
return map;
};
configureOCCCredit(description) {
return("$" + description)
}
activityIcon(tag) {
switch(tag) {
case "acss": return <img src={acss} />
case "app": return <img src={app} />
case "chatbot": return <img src={chatbot} />
case "email": return <img src={email} />
case "icm": return <img src={icm} />
case "impact": return <img src={impact}/>
case "ivr": return <img src={ivr} />
case "ivr_utterance": return <img src={ivr} />
case "netace": return <img src={netace} />
case "network": return <img src={network} />
case "retail": return <img src={retail} />
case "retail store": return <img src={retail} />
case "sms": return <img src={sms} />
case "vision": return <img src={vision} />
case "web": return <img src={web} />
case "occ": return <img src={occ} />
case "occ_ll": return <img src={occ} />
case "occ_al": return <img src={occ} />
}
}
itemsArray(arr) {
let items = [];
let self = this;
const grouped = this.groupBy(arr, item => item.source);
grouped.forEach(function(value, key) {
if(key === "IVR_UTTERANCE") {key = "IVR"}
switch(key.toString().toLowerCase()) {
case "acss": return items.push(<div className="recentActivityChannels"><img src={acss} width="15" /><span>{value.length < 10 ? "0" + value.length : value.length}</span></div>)
case "app": return items.push(<div className="recentActivityChannels"><img src={app} width="15" /><span>{value.length < 10 ? "0" + value.length : value.length}</span></div>)
case "chatbot": return items.push(<div className="recentActivityChannels"><img src={chatbot} width="15" /><span>{value.length < 10 ? "0" + value.length : value.length}</span></div>)
case "email": return items.push(<div className="recentActivityChannels"><img src={email} width="15" /><span>{value.length < 10 ? "0" + value.length : value.length}</span></div>)
case "icm": return items.push(<div className="recentActivityChannels"><img src={icm} width="15" /><span>{value.length < 10 ? "0" + value.length : value.length}</span></div>)
case "impact": return items.push(<div className="recentActivityChannels"><img src={impact} width="15" /><span>{value.length < 10 ? "0" + value.length : value.length}</span></div>)
case "ivr": return items.push(<div className="recentActivityChannels"><img src={ivr} width="15" /><span>{value.length < 10 ? "0" + value.length : value.length}</span></div>)
case "ivr_utterance": return items.push(<div className="recentActivityChannels"><img src={ivr} width="15" /><span>{value.length < 10 ? "0" + value.length : value.length}</span></div>)
case "netace": return items.push(<div className="recentActivityChannels"><img src={netace} width="15" /><span>{value.length < 10 ? "0" + value.length : value.length}</span></div>)
case "network": return items.push(<div className="recentActivityChannels"><img src={network} width="15" /><span>{value.length < 10 ? "0" + value.length : value.length}</span></div>)
case "retail": return items.push(<div className="recentActivityChannels"><img src={retail} width="15" /><span>{value.length < 10 ? "0" + value.length : value.length}</span></div>)
case "retail store": return items.push(<div className="recentActivityChannels"><img src={retail} width="15" /><span>{value.length < 10 ? "0" + value.length : value.length}</span></div>)
case "sms": return items.push(<div className="recentActivityChannels"><img src={sms} width="15" /><span>{value.length < 10 ? "0" + value.length : value.length}</span></div>)
case "vision": return items.push(<div className="recentActivityChannels"><img src={vision} width="15" /><span>{value.length < 10 ? "0" + value.length : value.length}</span></div>)
case "web": return items.push(<div className="recentActivityChannels"><img src={web} width="15" /><span>{value.length < 10 ? "0" + value.length : value.length}</span></div>)
case "occ": return items.push(<div className="recentActivityChannels"><img src={occ} width="15" /><span>{value.length < 10 ? "0" + value.length : value.length}</span></div>)
case "occ_ll": return items.push(<div className="recentActivityChannels"><img src={occ} width="15" /><span>{value.length < 10 ? "0" + value.length : value.length}</span></div>)
case "occ_al": return items.push(<div onClick={() => self.listAllActivities(value)} className="recentActivityChannels"><img src={occ} width="15" /><span>{value.length < 10 ? "0" + value.length : value.length}</span></div>)
}
})
items.push(<div className="clearFloat"></div>);
return items;
}
listAllActivities(arr){
let items = [];
var self = this;
const grouped = this.groupBy(arr, date => getDateServiceTab(date.date));
grouped.forEach(function(value, key) {
value.map((map) => {
items.push(<div className="row content-timeline" key={map.id}>
<div className="col-1 activityIcon tooltip2">{self.activityIcon(map.source.toString().toLowerCase())}
<div className="tooltiptext">{map.source.replace("_", " ")}</div>
</div>
<div className="col-11">
<span className="recentActivityTagHeader">{map.tag === undefined ? map.source : map.tag} <span className="smallGrey">({map.mtn === undefined ? "ACCT" : map.mtn.substr(map.mtn.length - 4)})</span></span>
<div className="recentActivityDescription">{map.source === "OCC_LL" || map.source === "OCC_AL" ? self.configureOCCCredit(map.description) : map.description}</div>
<div className="recentActivityDate">{styleDateTime(map.date)}</div>
</div>
</div>)
})
})
$('thisdiv').append(items).html()
return items;
}
static propTypes = {
children: PropTypes.instanceOf(Object).isRequired,
isOpen: PropTypes.bool.isRequired,
label: PropTypes.string.isRequired,
items: PropTypes.array.isRequired,
onClick: PropTypes.func.isRequired,
};
onClick = () => {
this.props.onClick(this.props.label);
};
render() {
const {
onClick,
props: { isOpen, label, items },
} = this;
return (
<div
style={{
background: '#fff',
}}
>
{/*onClick={onClick}*/}
<div style={{ padding: '15px 30px 10px 30px',borderBottom: isOpen ? '1px solid #000' : '1px solid #cdcdcd', }}>
<div><span style={{fontWeight:'bold'}}>{label}</span>
<div onClick={onClick} style={{ float: 'right', cursor:'pointer' }}>
{!isOpen && <span><img src={plus} width="14"/></span>}
{isOpen && <span><img src={minus} width="14"/></span>}
</div>
</div>
<div className="recentActivityChannelsPadding">
{this.itemsArray(items)}
</div>
</div>
{isOpen && (
<div
style={{
background: '#F9F9F9',
borderBottom: '1px solid #D5D7D7',
padding: '10px 30px',
}}
>
<div id="thisdiv"></div>
</div>
)}
</div>
);
}
}
export default AccordionSection;