我正在开发一个 React 组件，它会根据一些信息发送电子邮件。我为该电子邮件创建了另一个组件，以便我可以传递数据，然后它将以正确的格式显示数据。该格式包括两个表，一个是固定的，另一个是动态的。目前，我传递给动态表的数据将所有内容显示在同一行上。我希望它显示在不同的行上。
这就是数据发送到函数的方式：
{
"partnerPriority": [
" A",
" B"
],
"partnerTournament": [
" Copa libertadores",
" Copa "
],
"partnerEvent": [
" Cali vs America",
" Copa libertadores"
],
"partnerDate": [
" 12/12/12",
" 11/11/22"
],
"partnerCountries": [
" CO,BR,EC",
" CO"
],
"partnerChannels": [
" ESPN,FOX",
" FOX"
]
}
这是功能：
export const EmailHtePartner = (data) => {
try {
return `
<html>
<head>
<style>
* {
font-family: Helvetica, Arial, sans-serif;
}
h1,
h2,
h4,
h3,
h5 {
color: white;
}
h4 {
margin: auto;
}
th {
font-weight: 600;
margin: 6;
padding: 8;
}
td {
color: white;
margin: 6;
padding: 8;
font-weight: 100;
}
table {
text-align: center;
border-collapse: collapse;
}
table,
td,
th {
border: 0.1rem solid #ffffff;
}
.wrapper {
display: table;
width: 100%;
height: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.email-content {
display: inline-block;
text-align: left;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="email-content">
<div
style="
background-color: #050914;
border-radius: 10px;
padding: 1.5rem;
width: 700px;
height: fit-content;
margin: 3rem;
"
>
<h2 style="font-weight: bold; text-align: center">
TEXT
</h2>
<h3 style="margin: 2; font-weight: bold; text-align: center">
Events:
</h3>
<table>
<tr>
<th
style="
background-color: #fd8204;
color: #050914;
font-weight: 600;
"
>
Category
</th>
<th style="background-color: #fd8204; color: #050914">
Tournament
</th>
<th style="background-color: #fd8204; color: #050914">Event</th>
<th style="background-color: #fd8204; color: #050914">Date</th>
<th style="background-color: #fd8204; color: #050914">
Countries
</th>
<th style="background-color: #fd8204; color: #050914">
Channels
</th>
</tr>
${data.map((item, index) => `
<tr key=${index}>
<td>${item.partnerPriority}</td>
<td>${item.partnerTournament}</td>
<td>${item.partnerEvent}</td>
<td>${item.partnerDate}</td>
<td>${item.partnerCountries}</td>
<td>${item.partnerChannels}</td>
</tr>
`)}
</table>
<h3 style="margin: 2; font-weight: bold; text-align: center">
Notes:
</h3>
<table>
<tr>
<th style="background-color: #fd8204; color: black">
Partners
</th>
<th style="background-color: #fd8204; color: #050914">DMCR</th>
<th style="background-color: #fd8204; color: #050914">
Thresholds
</th>
</tr>
<tr>
<td
style="
text-align: justify;
font-weight: 100;
width: 33.3%;
padding: 1rem;
"
>
TEXT
</td>
<td
style="
text-align: justify;
font-weight: 100;
width: 33.3%;
padding: 1rem;
"
>
TEXT
</td>
<td
style="
text-align: justify;
font-weight: 100;
width: 33.3%;
padding: 1rem;
"
>
TEXT
</td>
</tr>
</table>
<div
style="display: flex; justify-content: left; padding-top: 10px"
>
<h5 style="margin: 2; font-weight: 100">
TEXT
</h5>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
`;
} catch (error) {
console.log(error);
}
}
测试时，我看到所有内容都在同一行上，但是我希望数据位于不同的行上，如下所示：
Category,tournament,event,Date,Countries,Channels
A,Copa libertadores, Cali vs America,12/12/12,CO,BR,EC,ESPN -> first row.
B,Copa, Copa libertadores, 11/11-22,CO,FOX -> second row.
如果有更多数据，则应添加所需数量的行。
我假设您将为
datadata解决方案：
{
data['partnerPriority'].map((value, index) => <tr key={index}>
<td>{data['partnerPriority'][index]}</td>
<td>{data['partnerTournament'][index]}</td>
<td>{data['partnerEvent'][index]}</td>
<td>{data['partnerDate'][index]}</td>
<td>{data['partnerCountries'][index]}</td>
<td>{data['partnerChannels'][index]}</td>
</tr>
)}
这是DEMO。
您需要重新格式化您的对象，以便拥有 2 个大型嵌套对象，因为您有类似 CSV 的扁平数据。例如：
[
{id: 0, partnerPriority: 'A', partnerTournament},
{id: 0, partnerPriority: 'A', partnerTournament}
]
然后填写每个中的所有数据