Reactjs 如何在react中对表内容应用筛选器

import React，{Component}来自'React'；
从“react-chartjs-2”导入{Doughnut}
从“redux”导入{bindActionCreators}；
从'react redux'导入{connect}；
从“../actions/”导入{fetchBeacons}；
常数DummyDoughnutData={
标签：[“信标1-区域a”、“信标2-区域c”、“信标3-区域a”、“信标4-区域b”、“信标5-区域b”]，
数据集：[
{
边框颜色：“rgba（255255255，.55）”，
数据：[30,9,17,22,11]，
背景颜色：[
"063e70",，
"107bb5",，
“#1A1C1D”，
'#666666',
“#2F4F4F”
]
}
],
};
//恒信标=[
//{区域：“区域a”，状态：“活动”，_id:1}，
//{区域：“区域c”，状态：“活动”，_id:2}，
//{区域：“区域a”，状态：“活动”，_id:3}，
//{区域：“区域b”，状态：“活动”，_id:4}，
//{区域：“区域b”，状态：“活动”，_id:5}，
//{区域：“区域b”，状态：“活动”，_id:6}，
//{区域：“区域c”，状态：“活动”，_id:7}
// ];
//类BeaconZoneRow扩展组件{
//render（）{
//返回(
//             
//                 
//{this.props.zone}
//                 
//             
//         )
//     }
// }
类BeaconRow扩展组件{
render（）{
返回(
{this.props.beacon.name}
{JSON.stringify（this.props.beacon.status）}
{this.props.beacon.zone.name}
)
}
}
类BeaconList扩展组件{
//排序=（prop）=>{return（a，b）=>a[prop].localeCompare（b[prop]）；
render（）{
常量行=[]；
this.props.beacons.map（beacon=>{
返回行。push（）
});
返回(
名称
地位
区
{rows}
)
}
}
类BeaconoughNutAnalysis扩展了组件{
render（）{
返回(


拜访
)
}
}
类BeaconListComponent扩展了组件{
建造师（道具）{
超级（道具）；
this.handleSubmit=this.handleSubmit.bind（this）
}
handleSubmit（）{
this.props.router.push（'/newbeacon'）；
}
组件将装入=（）=>{
this.props.fetchBeacons（）；
};
render（）{
返回(
添加信标


{this.props.beacons&&this.props.beacons.length>0？
:
…装载
}
)
}
}
函数MapStateTops（状态）{
返回{
信标：州。信标
}
}
功能匹配DispatchToprops（调度）{
返回bindActionCreators（{fetchBeacons:fetchBeacons}，dispatch）；
}
导出默认连接（mapStateToProps、matchDispatchToProps）（BeaconListComponent）假设将区域作为道具提供给BeaconList组件，则只需在映射时进行检查，如下所示

class BeaconList extends Component {

    // Sort = (prop) => { return (a,b) => a[prop].localeCompare(b[prop])};

    render() {
        const rows = [];
        //Assuming you are filtering based on zone and you are giving the zone you want to filter as a prop zone

        this.props.beacons.map( beacon => {
            if(beacon.zone === this.props.zone) {
              return rows.push(<BeaconRow beacon={beacon} key={beacon._id}/>)
            }
        });

        return (
            <div className="col-lg-6">
                <table className="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Zone</th>
                        </tr>
                    </thead>
                    <tbody>
                        {rows}
                    </tbody>
                </table>
            </div>
        )


    }
}

class BeaconList扩展组件{
//排序=（prop）=>{return（a，b）=>a[prop].localeCompare（b[prop]）；
render（）{
常量行=[]；
//假设您基于分区进行过滤，并将要过滤的分区作为道具分区
this.props.beacons.map（beacon=>{
if（beacon.zone==此.props.zone）{
返回行。push（）
}
});
返回(
名称
地位
区
{rows}
)
}
}

我希望这有助于
如何筛选内容，当前输出是什么？您希望获得什么？我正在获得输出，正如您可以看到的，在一个表中有3列名称状态和区域，我想在该使用区域中应用过滤器，并使用过滤器当我们选择相关区域时，其相关信息必须显示为现在我正在获取所有区域的所有信息Brother我正在获取api中的数据和以表格形式显示的数据我想应用过滤器，希望您现在理解Piyus，您将在表格中呈现之前根据某个键过滤数据，而不是之后我添加了显示表格的图片现在我想根据区域应用过滤器我想知道名称属于哪个区域1区到目前为止，它的所有1区想象一下，当数据从服务器获取时，会有更多这样的条目，我希望你现在能理解这就是我说的我想做的，忘记过滤器，当用户点击表格中的名称时，你能告诉我如何打开相关的信息页面吗？Piyus，我知道如何结束那个过滤器，唯一的问题是我需要一些时间来处理它。你能告诉我你是否为每个名字配置了路由器吗。在这种情况下，您可以提供一个关于名称的链接。您如何在beacons detail屏幕中获取有关名称的信息。我想这是另一种反应成分。你能把代码附加到我能给你一个主意的地方吗。您可以做的是像
这样的动态路由设置。在名称上指定一个链接，如