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

Question

我正在尝试创建一个 React 组件，该组件从我最初设置状态的 JavaScript 对象 pixarMovies 呈现数据表。我想呈现一个电影数据表，其中包含按日期按时间顺序排序的电影（我已附上an image 我正在尝试做的事情，我在 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 中有很多方法可以渲染表格。我建议查看一些 3rd 方组件，这些组件将使渲染表格变得非常简单和轻松。如果您想自己构建一个，请查看this guide 之类的内容。快速 google 一下“在 react 中渲染表格”应该会为您提供所需的所有信息。

表格应该根据状态进行调整：这应该会自动发生。每次您的组件状态发生变化时，您的组件都会重新渲染，因此它会使用新数据重新渲染表格。

将 onClick 函数应用于按钮：我在您的代码中看不到任何按钮，但 onClick 函数的工作方式与它们在其他任何内容中的反应非常相似。在组件上定义一个函数，然后将其传递给按钮。例如：

功能：

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

然后是按钮：

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

---

回答以下问题

如果您使用的是第 3 方组件，通常您希望将数据作为道具传递。所以你的渲染函数可能看起来像：

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>
  );
}