Question

如何使用ReactJs创建Master / Detail。我有以下代码显示Json文件中的记录，但是我需要有关如何使用创建详细页面的帮助。

export class FetchData extends Component {
    static displayName = FetchData.name;
    constructor(props) {
        super(props);
         this.state = { results: [],};
    }    
    //Pagination
    handlePageChange(pageNumber) {
        console.log(`active page is ${pageNumber}`);
        this.setState({ activePage: pageNumber });
    }
    componentDidMount() {       
    }
    static renderemployeeTable(results) {
        return (

            <div class="container-fluid"  >
                <div class="row">
                    {
                        PostData.data.Table.map((results, index) =>
                            <div class="col-sm-3">
                                <div class="card our-team" id="employeeInfo" >
                                    <div class="card-body">

                                        <img class="pic" src={`data:image/jpeg;base64,${results.photo}`} onerror="this.style.display='none'" />
                                         {results.Employee_Number}
                                        <h3 class="title">{results.first_name}{results.last_name}</h3>

                                        <div class="row">
                                            <div class="col-md-3 col-sm-6"> <span class="post glyphicon glyphicon-envelope"></span></div>
                                            <div class="col-md-9 col-sm-9"><a href="mailto:{results.email_address}">{results.Employee_Email}</a></div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-3 col-sm-6"> <span class="post glyphicon glyphicon-phone-alt"></span></div>
                                            <div class="col-md-9 col-sm-9">{results.phone}</div>
                                        </div>                                                      
                                     </div>
                                </div>
                            </div>
                        )
                    }

                </div>
                <div>
                    <Pagination
                        // activePage={this.state.activePage}
                        itemsCountPerPage={10}
                        totalItemsCount={450}
                        pageRangeDisplayed={5}
                        onChange={this.handlePageChange}
                    />
                </div>
            </div>
        );
    }

    render() {
        let contents = this.state.loading ? <p><em>Loading...</em></p>
            : FetchData.renderemployeeTable(this.state.results);

        return (
            <div>                
                {contents}
            </div>
        );    
    }    
}
ReactDOM.render(<FetchData />, document.getElementById("root"));

我在母版页上使用了

<Button title="View detail" onPress={() => navigate('Details', {id:results.Employee_Number)}    />

但我不断收到此错误：

TypeError：无法读取未定义的属性“导航”

我还在App.js中导入并创建了详细页面路由

<Route path='/Details' component={Details} />

如何将数据传递到详细信息页面？

Answer 1

<Route path='/Details' component={Details} />

因此，如果您已定义路线，则可以通过push方法调用url

onClick={() => this.props.history.push('/details')}

Answer 2

请看看：

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

我如何使用React创建Master Detail Page

2 个答案: