javascript - 条件渲染在 tbody 中不起作用

Question

我正在尝试渲染一个条件 JSX。所以，我无法渲染它

这里我有 tbody 的固定高度。

最大高度:120px；

<tbody className="text-center" style={jobsHeight}>
      {props.jobList && props.jobList.length > 0 && props.jobList.map((item, key) => {
        return areJobsPresent ? (
          <tr key={key}>
            <td className="noborder">{item.technology}</td>
            <td className="font-weight-bold noborder">{item.resumeCount}</td>
            <td title={item.jobTitle} className="noborder">
              {item.jobTitle}
            </td>
            <td className="font-weight-bold noborder">{item.totalScore}</td>
            <td className="font-weight-bold noborder">{item.avgScore}</td>
          </tr>
        ) :
          <tr>
            <td>
              No Jobs Found. please create a Job
            </td>
          </tr>
      })}

所以在渲染之前，我正在计算 areJobSabsent 标志。

 const areJobsPresent = props.jobList.length > 0

所以，我在这里尝试了这种方式。如果不存在数据，那么我想显示带有消息的 tr。那么，我哪里错了？谁能帮我解决这个问题？

Answer 1

您的代码不起作用的原因是因为您在调用 map 之前已经检查了条件，因此 map 永远不会执行并且内部条件永远不会被检查。您必须在 map 调用之外使用三元表达式

<tbody className="text-center" style={jobsHeight}>
      {props.jobList && props.jobList.length > 0 ? props.jobList.map((item, key) =>         <tr key={key}>
            (<td className="noborder">{item.technology}</td>
            <td className="font-weight-bold noborder">{item.resumeCount}</td>
            <td title={item.jobTitle} className="noborder">
              {item.jobTitle}
            </td>
            <td className="font-weight-bold noborder">{item.totalScore}</td>
            <td className="font-weight-bold noborder">{item.avgScore}</td>
          </tr>)
        ) :
          <tr>
            <td>
              No Jobs Found. please create a Job
            </td>
          </tr>
      }