Question

我正在尝试渲染一个条件JSX。因此，我无法渲染

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

maxHeight：120像素；

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

条件渲染无法在主体中起作用

1 个答案: