React JS循环内的条件渲染

时间:2019-05-31 23:20:55

标签: reactjs loops rendering

我有一些来自外部API的数据,这些数据正试图显示在表中。数据随日期时间戳一起返回。

我想将数据呈现在表中,但是其中有一个额外的行,用于在日期更改时显示日期。

我尝试过的

  • 我试图更新lastDate属性值。
  • 我尝试使用(condition)进行条件渲染?预期:render()方法中的其他语法和变量。
  • 我不知道如何跟踪当前日期变量并在每次循环迭代时对其进行更新。
  • 我尝试将DateRow和DataRow拆分为单独的组件并传递日期,但是状态不会持久。
  • 我不确定执行此操作的最佳做​​法。或者,如果这只是一个坏主意。

import React from 'react';
import { Link } from 'react-router-dom';
import { Table } from 'react-bootstrap';

import * as helpers from '../../common/helpers';

export default class SomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    fetch(`https://api.example.com`)
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            data: result
          });
        }
      )
  }

  render() {
    const { data } = this.state;
    return (
      <>
        <h4>Most Recent</h4>
        <Table>
          <thead>
            <tr>
              <th>Time</th>
              <th>Column 1</th>
              <th>Column 2</th>
            </tr>
          </thead>
          <tbody>
            {data.map(newRow => (

              // Here I'd like to conditionally render a row if there has been a change in day from the last row before rendering the next row.
              // ie. if previousDate != currentDate
              // <tr>
              //   <td>{helpers.getFormattedDate(newRow.time)}</td>
              //   <td></td>
              //   <td></td>
              // </tr>
              // Then render the following :

              <tr key={newRow.id}>

                <td>
                  {helpers.getFormattedTime(newRow.time)}
                </td>

                <td>
                  <Link to={`/something`}>{helpers.getFormattedNumber(newRow.value)}</Link>
                </td>

                <td>
                  {/* Some more content here */}
                </td>

              </tr>
            ))}
          </tbody>
        </Table>

      </>
    );
  }
}

这里的任何帮助将不胜感激,我对此不免多失。

谢谢!

2 个答案:

答案 0 :(得分:1)

您可以通过结合以下两个功能在React中进行条件渲染:

  1. 一旦确定了表达式的值,JavaScript就会停止使用布尔运算符(如&&||来评估表达式。例如,在func1() && func2()中,如果func2返回false(func1nullundefined,{{ 1}})值。同样,在false中,如果0返回真实值,则永远不会调用func1() || func2()

  2. 反应不会呈现虚假(func2除外)值。

因此在React中进行条件渲染的一种常见方法是执行以下操作:

func1

仅在0为真的情况下才会显示<div> { isTrue && ( <MyConditionalComponent/> )} </div> 的位置。

在您的情况下,由于您使用的是MyConditionalComponent,因此您可能还想使用isTrue组件,该组件基本上允许您为该元素的一个元素返回多个组件map。另外,您可以使用Fragment,但为简单起见,我将仅显示一个map的示例:

reduce

其中map是一些函数,该函数仅返回<tbody> {data.map((newRow, i) => ( <React.Fragment> (i !== 0 && (getDate(newRow.time) !== getDate(data[i - 1].time))) && ( <tr> <td>{helpers.getFormattedDate(newRow.time)}</td> <td></td> <td></td> </tr> ) <tr key={newRow.id}> <td> {helpers.getFormattedTime(newRow.time)} </td> <td> <Link to={`/something`}>{helpers.getFormattedNumber(newRow.value)}</Link> </td> <td> {/* Some more content here */} </td> </tr> </React.Fragment> ))} </tbody> 对象的日期部分。

请注意,我们还利用了getDate回调的第二个参数(Date),它是当前元素的索引,用于检查前一个元素的日期。

答案 1 :(得分:1)

您可以使用newJFrameManager.start()的第二个参数,即索引:

.map