在 React 中有条件地渲染类答案

【问题标题】：Render class conditionally in React在 React 中有条件地渲染类
【发布时间】：2020-04-13 18:27:04
【问题描述】：

我正在尝试有条件地呈现一个类。如果映射的项目是空白的，我希望有一个呈现的类。否则，没有变化。我敢肯定这很简单，但我是新手，不知道如何识别空白项目。这是范围的问题吗？这是我组件中的代码：

const TableBody = (props) => {
  let classes = ''
  classes += (props.data.map === '') ? '' : 'collapse'
  return (
    <tbody>
      {props.data.map((item, index) => (
        <tr key={typy(item, 'sys.id').safeString || index}>
          {props.columns.map(column =>
            <td className={classes} role='cell' key={column.label}>{typy(item, column.path).safeObject}</td>)
          }
        </tr>
      ))}
    </tbody>
  )
}

所有<td> 元素都已折叠，因此我上面使用的代码一定不能正确检测到空白值。谁能在这里指出我正确的方向？

【问题讨论】：

所有您的tds 都使用相同的代码输出，这些代码要么没有类，要么没有collapse 类。如果检查是td 特定的，它应该在props.columns.map 回调内部，而不是在它之前。
看起来props.data 是一个数组？在这种情况下，props.data.map 将是一个函数（map 是数组的函数），它永远不等于空字符串。所以classes 总是等于'collapse'。
props.data.map === '' 没有意义，因为props.data.map 是一个函数。（除了@T.J.Crowder 所说的正确）
正如上面的 cmets 所指出的，您应该使用 const classes = props.data.length === 0 ? "" : "collapse"，因为 props.data 似乎是 array
我正在尝试评估列数组中的项目。

标签： javascript css reactjs

【解决方案1】：

根据我的评论，props.data 似乎是一个数组。您正在检查 props.data.map === '' 是否会始终评估为 false。您可能应该修复该语句，否则该类将始终“崩溃”。希望对您有所帮助！

【讨论】：

确实有帮助。我的下一个问题是如何结合该逻辑来评估 column.map 内部的？