Question

我有一些来自外部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>

      </>
    );
  }
}

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

谢谢！

Answer 1

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

一旦确定了表达式的值，JavaScript就会停止使用布尔运算符（如&&和||来评估表达式。例如，在func1() && func2()中，如果func2返回false（func1，null，undefined，{{ 1}}）值。同样，在false中，如果0返回真实值，则永远不会调用func1() || func2()。
反应不会呈现虚假（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），它是当前元素的索引，用于检查前一个元素的日期。

Answer 2

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

.map

React JS循环内的条件渲染

2 个答案: