React邮件组件动态HTML表格数据未按行显示的修复需求
2026-7-2
问题：React邮件组件动态表格数据无法按行展示
我开发了一个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 -> 第一行 B,Copa, Copa libertadores, 11/11/22,CO,FOX -> 第二行
解决方案
问题核心是传入的数据是单个对象，每个属性对应一个数组，而非对象数组，直接调用data.map()无法正确遍历生成行。需要先将数据转换为每行对应一个对象的数组，再进行遍历。
修改后的代码如下：
export const EmailHtePartner = (data) => { try { // 转换数据结构：将每个索引对应的字段组合成单个对象 const rows = data.partnerPriority.map((_, index) => ({ partnerPriority: data.partnerPriority[index]?.trim(), partnerTournament: data.partnerTournament[index]?.trim(), partnerEvent: data.partnerEvent[index]?.trim(), partnerDate: data.partnerDate[index]?.trim(), partnerCountries: data.partnerCountries[index]?.trim(), partnerChannels: data.partnerChannels[index]?.trim() })); 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> ${rows.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); } }
关键修改点
- 数据结构转换：通过
data.partnerPriority.map()遍历数组长度，将每个索引对应的各字段值组合成单个对象，生成rows数组。 - 遍历目标替换：将原来的
data.map()改为rows.map()，遍历转换后的对象数组生成每行的<tr>元素。 - 添加trim处理：去除字符串前后的空格，优化显示效果。
这样修改后，每条对应索引的数据会自动生成一行，后续新增数据时只要保持各数组长度一致，就会自动新增对应行。
内容的提问来源于stack exchange，提问作者Felipe Useda
相关产品推荐
相关产品推荐
