从数组中渲染表格行：反应

Question

我正在尝试调用一个函数来使用 map 函数在我作为道具接收的文本数组上呈现表格行，但由于某种原因它们没有被呈现。我犯了句法错误吗？我已经验证了 license text props 数组不为空，只是返回一个字符串数组。

const showLicenseText = () => {
 return licenseText.map(text => {
      <tr>
        <ThPadding>
          License Information
          {':'}
        </ThPadding>
        <td>{text}</td>
      </tr>
  })
}

render方法中的原始代码是：

return (
  <table>
    <tbody>
      {bbbFileOpenDate && (
        <tr>
          <ThPadding>
            {text.bbbFileOpened}
            {':'}
          </ThPadding>
          <td>{bbbFileOpenDate}</td>
        </tr>
      )}
      {yearsInBusiness && !isOutOfBusiness && (
        <tr>
          <ThPadding>
            {yearsInBusinessLabel}
            {':'}
          </ThPadding>
          <td>{yearsInBusiness}</td>
        </tr>
      )}
      {businessStartDate && (
        <tr>
          <ThPadding>
            {businessStartDateLabel}
            {':'}
          </ThPadding>
          <td>{businessStartDate}</td>
        </tr>
      )}
      {showLicenseText}
      {locationStartDate && (
        <tr>
          <ThPadding>
            {locationStartDateLabel}
            {':'}
          </ThPadding>
          <td>{locationStartDate}</td>
        </tr>
      )} ....

Answer 1

在您的map 中，您需要return 您所在的行。地图需要返回一些东西

const showLicenseText = () => {
 return licenseText.map(text => {
      return (<tr>
        <ThPadding>
          License Information
          {':'}
        </ThPadding>
        <td>{text}</td>
      </tr>)
  })
}

Answer 2

你忘了叫它！并且在地图中，由于您使用的是{}，因此您需要明确的return 声明

  {showLicenseText()}

另外我会修改如下：

在render之外定义函数

showLicenseText = (licenseTextRef) => {
 return licenseTextRef.map(text => {
      return <tr>
        <ThPadding>
          License Information
          {':'}
        </ThPadding>
        <td>{text}</td>
      </tr>
  })
}

==============================

  {this.showLicenseText(licenseText)}