React类组件中如何在<td>内调用自定义函数打印数组内容？

让我来帮你排查问题，你的代码主要有两个关键问题导致没有输出，我们一步步来修复：

问题1：函数调用方式错误 #

你在<td>里写的是{this.printDays}，这只是把函数本身传递给React，并没有执行它。你需要加上括号来调用函数，改成：

<td style={{fontSize:"15px"}}>
  {this.printDays()}
</td>

问题2：printDays方法的逻辑错误 #

原来的方法里有几个明显问题：

• 用const声明的days是常量，不能重新赋值，这会直接抛出运行错误
• 字符串里的\n在HTML中不会被解析成换行，浏览器只会把它当成普通空格
• 你用了map但没有利用它的返回值，手动拼接字符串的方式既低效又容易出错

我们可以重写这个方法，让它直接返回React元素数组，这样React就能正确渲染每行的日期：

printDays = () => {
  // 给每个日期后面加<br>实现换行，key是React列表渲染的必填项
  return this.state.arr_workingDays.map((day, index) => (
    <React.Fragment key={index}>
      {day}
      <br />
    </React.Fragment>
  ));
}

如果你使用的React版本支持短语法的Fragment，也可以简化成：

printDays = () => {
  return this.state.arr_workingDays.map((day, index) => (
    <>
      {day}
      <br />
    </>
  ));
}

额外优化建议 #

如果你的arr_workingDays里的每个day是唯一值，最好用day作为key而不是index，这样React的列表渲染性能会更优：

printDays = () => {
  return this.state.arr_workingDays.map(day => (
    <>
      {day}
      <br />
    </>
  ));
}

完整修正后的关键代码片段 #

// 修正后的printDays方法
printDays = () => {
  return this.state.arr_workingDays.map((day, index) => (
    <React.Fragment key={index}>
      {day}
      <br />
    </React.Fragment>
  ));
}

// render里的调用部分
<tr>
  <th style={{fontSize:"15px"}}>Days</th>
  <td style={{fontSize:"15px"}}>
    {this.printDays()}
  </td>
</tr>

这样修改后，你的数组里的工作日就会在<td>内逐行显示了。

内容的提问来源于stack exchange，提问作者user13353216