如何使用 ReactJs 创建主/详细信息。我有以下代码,显示来自 Json
文件的记录,但我需要有关如何使用创建详细信息页面的帮助。
最佳答案
请看看这个:
1.) 如果你还没有安装react-router-dom,你必须使用npm安装react-router-dom:
- npm install --save React-router-dom
2.) 从react-router-dom导入Route、Switch模块并初始化路由,如下所示:
import { Redirect, Route, Switch } from 'react-router-dom';
const Routes = ({ match }) => (
<Switch>
<Route path={`${match.url}/fetchdata`} component={FetchData} />
<Route path={`${match.url}/employee/detail`} component={EmployeeDetail} />
</Switch>
);
export default Routes;
3.) 在FetchData组件中更新如下:
import React, {Component} from 'react';
import { withRouter } from 'react-router-dom';
class FetchData extends Component{
constructor(props){
super(props);
this.state={}
}
navigateToDetailPage = (empId) =>{
const {history} = this.props;
history.push('.employee/detail', { id: empId });
}
render(){
return(
<Button title="View detail" onPress={() => navigateToDetailPage(results.Employee_Number)} />
);
}
}
export default FetchData;
4.) 在 EmployeeDetail 组件中,您可以获得如下数据:
import { withRouter } from 'react-router-dom';
const EmployeeDetail = (props) => {
const { location } = props;
const { id } = location.state;
}
export default withRouter(EmployeeDetail);
关于reactjs - 如何使用 React 创建主详细信息页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59043385/