从JavaScript对象渲染React中的数据表

Question

我试图创建一个React组件，该组件从最初设置其状态的JavaScript对象pixarMovies呈现数据表。 我想渲染一个电影数据表，其中按日期按时间顺序对电影进行排序（我已经附上了我试图用HTML创建的图像 ）。 一个人怎么能做到这一点？

该组件与App.js分开，我将其包含在其他组件中。 我希望表格根据状态进行相应调整（以考虑电影的添加和删除），以及能够将onClick函数应用于按钮。

import React, { Component } from 'react';
import { BrowserRouter as Router, Redirect, Switch, Route, Link } from 'react-router-dom';

export default class PixarMovies extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pixarMovies: [
            {
                title: "Cars",
                date: "2006-06-09",
                budget: "$120 million",
            },
            {
                title: "Toy Story",
                date: "1995-11-05",
                budget: "$30 million",
            },
            {
                title: "Ratatouille",
                date: "2007-06-29",
                budget: "$150 million",
            },
            {
                title: "The Incredibles",
                date: "2004-11-05",
                budget: "$92 million"
            }
            ]
        }
    }

    render() {
        return (
            <div className="container">
                <h1>Pixar Movies</h1>
                {/* Insert Table here */}
            </div>
        );
    }
}

谢谢！

Answer 1

好，看起来这里有几块，所以让我们看一下它们。

按日期按时间顺序排序 ：Javascript数组具有如下所示的排序函数： myArray.sort() 。 您可以将函数传递给.sort调用，以使用所需的任何字段。 因此，也许这样的事情适合您：

const sortedPixarMovies = this.state.pixarMovies.sort((movA, movB) => new Date(movA.date) - new Date(movB.date));

渲染表格 ：在React中有很多渲染表格的方法。 我建议查看一些第三者组件，这些组件将使表格渲染变得非常简单和轻松。 如果您想自己建造一个，请看一下本指南 。 快速Google的“在React中显示表格”应会为您提供所需的所有信息。

表应根据状态进行调整 ：这应该自动发生。 每次组件状态更改时，组件都会重新呈现，因此它将使用新数据重新呈现表。

将onClick函数应用于按钮 ：我在您的代码中看不到任何按钮，但是onClick函数的工作原理与其他任何事情一样。 在组件上定义一个函数，然后将其传递给按钮。 例如：

功能：

myOnChangeFunc = (newValue) => {
  this.setState({ myField: newValue });
}

然后是按钮：

<button onChange={ this.myOnChangeFunc }>My Button</button>

---

回应以下问题

如果您使用的是第三方组件，通常您希望将数据作为道具传入。 因此，您的渲染函数可能类似于：

render() {
  const myFormattedData = this.state.data.map... (formatted);
  return <ThirdPartyComponent data = { myFormattedData } />;
}

如果您自己进行操作，则可以在渲染函数中映射数据。 这是一个如何呈现列表的超简单示例：

render() {
  return (
    <ul>
      { this.state.listData.map((d) => <li key={ d.id }>{ d.value }</li>) }
    </ul>
  );
}