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中渲染表。我建议查看一些第三方组件，这些组件将使表格变得简单而轻松。如果您想自己构建一个，请查看this guide之类的内容。一个快速谷歌“渲染表反应”应该为您提供所需的所有信息。

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

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

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

1 个答案: