javascript - 如何根据时间戳渲染反应组件

Question

我有一个带有弹簧后端的反应应用程序（材料 ui）。我想基于三个时间戳渲染组件，即（过去 24 小时、过去 7 天、上个月）。如何有条件地渲染和重用我的组件。我用过材料表和卡片。我想根据时间戳更改这些卡片和表格的值。对此的任何帮助将不胜感激。

反应代码： -

import React from 'react';
import MaterialTable, {MTableRow} from 'material-table';
//import Icons from '@material-ui/icons'
import { SearchInput } from 'components';
import AddBox from '@material-ui/icons/AddBox';
import ArrowUpward from '@material-ui/icons/ArrowUpward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';

class BasicSearch extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
          items : [],
          data1 : [],
          time : [24,48,72],
          isLoaded : false  
      }

    }

    componentDidMount() {
      fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then((json) => {
          this.setState({ items : json}); 
          console.log("Json = ", json)
          console.log("Basic Search Items = ", this.state.items);
      })
    }



    render() {

      let {items, data1, time} = this.state;
      console.log("Type of items = ", typeof(items));

      if(time.length === 3) {
        return (
            <MaterialTable 
                title="Basic Search Preview"
                icons={{
                    Check: Check,
                    DetailPanel: ChevronRight,
                    Export: SaveAlt,
                    Filter: FilterList,
                    FirstPage: FirstPage,
                    LastPage: LastPage,
                    NextPage: ChevronRight,
                    PreviousPage: ChevronLeft,
                    Search: Search,
                    ThirdStateCheck: Remove,
                }}                
                columns={[
                    { title: 'User ID', field: 'userId', 
                },
                    { title: 'ID', field: 'id' },
                    { title: 'Title', field: 'title' },
                    { title: 'Body', field: 'body' }
                ]}
                data= {items}
                options={{
                    searching: true,
                    sorting: true
                }}


            />             
      )
    }

    else {
        return(
            <MaterialTable 
                title="Basic Search Preview"
                columns={[
                    { title: 'User ID', field: 'userId', 
                },
                    { title: 'ID', field: 'id' },
                    { title: 'Title', field: 'title' }
                ]}
                data= {items}
                options={{
                    searching: true,
                    sorting: true,
                    exportButton: true

                }}

            />             
        )
    }

    }
  }

  export default BasicSearch;

标签： javascriptreactjsspring-bootmaterial-ui