条件渲染在反应的主体中不起作用

Question

我正在尝试渲染一个条件 JSX.So，但我无法渲染

在这里，我有身体的固定高度。

最大高度 ： 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 永远不会执行，内部条件也永远不会被检查。您必须在映射调用之外使用三元表达式

<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>
      }