Javascript 如何将这两个功能组件（TableData.js和TableSearch.js）更改为类组件？_Javascript_Reactjs_Redux

Javascript 如何将这两个功能组件（TableData.js和TableSearch.js）更改为类组件？

javascript reactjs redux

Javascript 如何将这两个功能组件（TableData.js和TableSearch.js）更改为类组件？,javascript,reactjs,redux,Javascript,Reactjs,Redux,我需要将功能组件（TableSearch.js和TableData.js）制作成类组件，第一类组件应称为TableSearch，第二类组件应称为TableData。我刚开始研究React和Redux，所以这对我来说仍然很难，而且复杂的是在这些函数中对象是通过一个参数传递的（解构） TableSearch.js： import React from "react"; export default ({ value, onChange, onSearch }) => { return (

我需要将功能组件（TableSearch.js和TableData.js）制作成类组件，第一类组件应称为TableSearch，第二类组件应称为TableData。我刚开始研究React和Redux，所以这对我来说仍然很难，而且复杂的是在这些函数中对象是通过一个参数传递的（解构）

TableSearch.js：

import React from "react";
export default ({ value, onChange, onSearch }) => {
  return (
    <div className="tableSearch">
        <input type="text" className="searchInput" onChange={onChange} value={value} placeholder="Search by flight"/>
        <button className="buttonSearch" onClick={() => onSearch(value)}>Search</button>
    </div>
  );
};

从“React”导入React；
导出默认值（{value，onChange，onSearch}）=>{
返回(
onSearch（值）}>搜索
);
};

TableData.js：

import React from "react";
export default ({ data }) => (
     <div className="tableContainer">
  <table className="table">
    <thead>
      <tr>
        <th>Terminal</th>
        <th>Gate</th>
        <th>Time</th>
        <th>Destination</th>
        <th>Airline</th>
        <th>Flight</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {data.map(item => {
         const dt = new Date(item.actual);
         const mins = dt.getMinutes();
        return (
          <tr key={item.ID}>
            <td>{item.term}</td>
            <td>{item.gateNo}</td>
            <td>{`${dt.getHours()}:${mins < 10 ? '0' : ''}${mins}`}</td>
            <td>
              {item["airportToID.city_en"]
                ? item["airportToID.city_en"]
                : item["airportFromID.city_en"]}
            </td>
            <td>{item.airline.en.name}</td>
            <td>{item["planeTypeID.code"]}</td>
            <td>{item.status}</td>
          </tr>
        );
      })}
    </tbody>
  </table>
</div>
);

从“React”导入React；
导出默认值（{data}）=>(
终点站
大门
时间
目的地
航空公司
航班
地位
{data.map（项=>{
常数dt=新日期（实际项目）；
const mins=dt.getMinutes（）；
返回(
{item.term}
{item.gateNo}
{${dt.getHours（）}:${mins<10？'0'：''}${mins}}}
{项目[“机场城市”]
？项目[“机场城市”]
：项目[“airportFromID.city\u en”]}
{item.airline.en.name}
{item[“planeTypeID.code”]}
{item.status}
);
})}
);

如何将这两个功能组件（TableData.js和TableSearch.js）更改为类组件？ ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

我还将编写主组件App.js（获取更多信息）

从“React”导入React；
从“react”导入{Component}；
从“react redux”导入{connect}；
从“./actions”导入{fetchData}；
从“./actions”导入{filter}；
从“./actions”导入{setSearch}；
从“./组件/TableData”导入TableData；
从“./components/TableSearch”导入表搜索；
从“./组件/标题”导入标题；
从“./组件/页脚”导入页脚；
导入“./components/app.css”；
导出函数searchFilter（搜索、数据）{
返回data.filter（n=>n[“planeTypeID.code”].toLowerCase（）.includes（search））；
}
施工天数=[“12-11-2019”、“13-11-2019”、“14-11-2019”]；
类根扩展了React.Component{
componentDidMount（）{
this.props.onFetchData（天[this.props.propsReducer.day]）；
}
render（）{
const{onFilter，onSetSearch，onFetchData}=this.props；
const{search，shift，data，filteredData}=this.props.propsReducer；
返回(


搜索航班


onSetSearch（e.target.value）}
onSearch={value=>onFilter（{search:value}）}/>




{data&&Object.keys（data.map）（n=>(
onFilter（{shift:e.target.dataset.shift}）className={n==shift？“活动”：“noActive”}>
{n}
))}
昨天：今天：明天：
{days&&days.map（（day，i）=>(
onFetchData（day）}className=“buttonDaysOne”>
{day}
))}
{数据&&}
);
}
}
const mapStateToProps=state=>state；
const matchDispatchToProps=调度=>({
onFilter:args=>dispatch（filter（args）），
onSetSearch:search=>dispatch（setSearch（搜索）），
onFetchData:day=>dispatch（fetchData（day））
});
导出常量ConnectedRoot=connect(
MapStateTops，
matchDispatchToProps
)（根）；

我不知道你为什么要这么做，希望你有一个好的理由但你应该这样做

TableSearch.jsx

import React from "react";
export default class TableSearch extends React.Component {

    render() {
        const { value, onChange, onSearch } = this.props;
        return (
            <div className="tableSearch">
                <input type="text" className="searchInput" onChange={onChange} value={value} placeholder="Search by flight" />
                <button className="buttonSearch" onClick={() => onSearch(value)}>Search</button>
            </div>
        );
    }
};

从“React”导入React；
导出默认类TableSearch扩展React.Component{
render（）{
const{value，onChange，onSearch}=this.props；
返回(
onSearch（值）}>搜索
);
}
};

TableData.jsx

import React from "react";
export default class TableData extends React.Component {

    render() {
        const { data } = this.props;
        return (
            <div className="tableContainer">
                <table className="table">
                    <thead>
                        <tr>
                            <th>Terminal</th>
                            <th>Gate</th>
                            <th>Time</th>
                            <th>Destination</th>
                            <th>Airline</th>
                            <th>Flight</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {data.map(item => {
                            const dt = new Date(item.actual);
                            const mins = dt.getMinutes();
                            return (
                                <tr key={item.ID}>
                                    <td>{item.term}</td>
                                    <td>{item.gateNo}</td>
                                    <td>{`${dt.getHours()}:${mins < 10 ? '0' : ''}${mins}`}</td>
                                    <td>
                                        {item["airportToID.city_en"]
                                            ? item["airportToID.city_en"]
                                            : item["airportFromID.city_en"]}
                                    </td>
                                    <td>{item.airline.en.name}</td>
                                    <td>{item["planeTypeID.code"]}</td>
                                    <td>{item.status}</td>
                                </tr>
                            );
                        })}
                    </tbody>
                </table>
            </div>
        );
    }
}

从“React”导入React；
导出默认类TableData扩展React.Component{
render（）{
const{data}=this.props；
返回(
终点站
大门
时间
目的地
航空公司
航班
地位
{data.map（项=>{
常数dt=新日期（实际项目）；
const mins=dt.getMinutes（）；
返回(
{item.term}
{item.gateNo}
{${dt.getHours（）}:${mins<10？'0'：''}${mins}}}
{项目[“机场城市”]
？项目[“机场城市”]
：项目[“airportFromID.city\u en”]}
{item.airline.en.name}
{item[“planeTypeID.code”]}
{item.status}
);
})}
);
}
}

import React from "react";
export default class TableData extends React.Component {

    render() {
        const { data } = this.props;
        return (
            <div className="tableContainer">
                <table className="table">
                    <thead>
                        <tr>
                            <th>Terminal</th>
                            <th>Gate</th>
                            <th>Time</th>
                            <th>Destination</th>
                            <th>Airline</th>
                            <th>Flight</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {data.map(item => {
                            const dt = new Date(item.actual);
                            const mins = dt.getMinutes();
                            return (
                                <tr key={item.ID}>
                                    <td>{item.term}</td>
                                    <td>{item.gateNo}</td>
                                    <td>{`${dt.getHours()}:${mins < 10 ? '0' : ''}${mins}`}</td>
                                    <td>
                                        {item["airportToID.city_en"]
                                            ? item["airportToID.city_en"]
                                            : item["airportFromID.city_en"]}
                                    </td>
                                    <td>{item.airline.en.name}</td>
                                    <td>{item["planeTypeID.code"]}</td>
                                    <td>{item.status}</td>
                                </tr>
                            );
                        })}
                    </tbody>
                </table>
            </div>
        );
    }
}