如何使用 React JS 中的循环根据条件渲染或不渲染表格数据？

Question

我正在使用 React.js 进行练习，但在遍历数据数组和根据每个数据节点中的属性有选择地呈现元素时遇到问题。

数据集的格式如下：

var requests =  [   
    {"id":1, "title":"request","updated":"2015-08-15","created":"2015-08-12","status":"Denied"}, ...]

我的渲染代码正在寻找一个标志值来确定它应该或不应该渲染什么。逻辑工作正常（即在应该返回 true 或 false 时，la console.log），但是用 JSX 编写的渲染代码给我带来了麻烦。这是我到目前为止在 tbody 部分中的内容：

           <tbody>    
             {requests.map(function(row, i) {
               {filter === requests[i].status || filter === "" ?
                 <tr key={i}>
                   <td style={tdStyle}>{row.title}</td>
                   <td style={tdStyle}>{row.status}</td>
                   <td style={tdStyle}>{row.created_at}</td>
                   <td style={tdStyle}>{row.updated_at}</td>
                   <td style={tdStyle}><a href="">delete</a></td>
                 </tr>
               : null}
             })}
           </tbody>

我查看了this link 以获得指导，但它似乎不起作用。

任何帮助将不胜感激！

Answer 1

正如我在评论中提到的，您需要返回计算值，这样map() 函数才能正常工作。

另外，在这种情况下，我会使用 filter() 函数仅映射满足您条件的元素。

<tbody>
  // use the filter function to get only the matching elements before mapping
  {requests.filter(function(row){
    // return true to include array element, false to exclude
    return (filter === row.status || filter === "");
  }).map(function(row, i) {
      // always wrap jsx in parentheses because of line breaks in javascript syntax
      // make sure to return, this actually adds it
      return (
        <tr key={i}>
          <td style={tdStyle}>{row.title}</td>
          <td style={tdStyle}>{row.status}</td>
          <td style={tdStyle}>{row.created_at}</td>
          <td style={tdStyle}>{row.updated_at}</td>
          <td style={tdStyle}><a href="">delete</a></td>
        </tr>
      );
  })}
</tbody>

Answer 2

const requests =  [
    {"id":1, "title":"Request from Nancy","updated_at":"2015-08-15 12:27:01 -0600","created_at":"2015-08-12 08:27:01 -0600","status":"Denied"},
    {"id":2, "title":"Request from David","updated_at":"2015-07-22 11:27:01 -0600","created_at":"2015-07-15 12:27:01 -0600","status":"Approved"}
];

const jsx = function(filter) {

    const isCorrectStatus = (x) => x.status === filter;

    return  <tbody>    
         {requests.filter(isCorrectStatus).map(function(row, i) {
           return <tr key={i}>
               <td>{row.title}</td>
               <td>{row.status}</td>
               <td>{row.created_at}</td>
               <td>{row.updated_at}</td>
               <td><a href="">delete</a></td>
             </tr>
        })}
    </tbody>
}

const filter = 'Denied';
ReactDOM.render(jsx(filter), document.getElementById('app'));

我将它重写如下，我们有一个预先构建的过滤器方法，我们不妨使用它而不是重新实现轮子，它使我们的代码更简洁。