Question

我正在制作一个Web应用程序，当我使用路由器在同一页面上单击用户的详细信息时，我想在其中显示该用户的详细信息。这是我的index.js页面

import React from "react";
import { render } from "react-dom";
import { Menu } from "./components/header";
import { MainMenu } from "./components/main";
import { ControlBar } from "./components/sidebar2";
import { Footer } from "./components/footer";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { App } from "./components/app";
import Details from "./components/userdetails";

window.React = React;

render(
  <div>
    <Menu />
    <ControlBar />
    <MainMenu />
    <BrowserRouter>
      <Switch>
        <Route path="/posts" component={App}>
          <Route path="/posts/details/:id" component={Details} />
        </Route>
        <Route path="/user-lists" component={App}>
          <Route path="/user-lists/details/:id" component={Details} />
        </Route>
        <Route path="*" component={App} />
      </Switch>
    </BrowserRouter>{" "}
    <Footer />
  </div>,
  document.getElementById("react-container")
);

这是我的users.js页面

import React from "react";
import MyTable from "./table";

export default class Table extends React.Component {
  constructor(props) {
    super(props);

    this.columns = [
      {
        name: "ID",
        key: "id"
      },
      {
        name: "Name",
        key: "name"
      },
      {
        name: "Username",
        key: "username"
      },
      {
        name: "Email",
        key: "email"
      },
      {
        name: "Website",
        key: "website"
      }
    ];

    this.maxItems = 5;
  }

  state = {
    pgNo: 0,
    table: [],
    isFetching: true,
    url: "https://jsonplaceholder.typicode.com/users/"
  };
  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(res => {
        this.setState({ table: res, isFetching: false });
      });
  }

  render() {
    return this.state.isFetching ? (
      <div
        className="loader"
        style={{
          marginLeft: "50%"
        }}
      >
        <img src="/assets/index.svg" />
      </div>
    ) : (
      <MyTable
        pgNo={this.state.pgNo}
        maxItems={this.maxItems}
        columns={this.columns}
        data={this.state.table}
        url={this.state.url}
      />
    );
  }
}

这是我的table.js页面

import React from "react";
import "../stylesheets/adminlte.css";
import Details from "./userdetails";
import { Link } from "react-router-dom";

var reg = new RegExp(/[/][0-9]+[/]?/);

export default class MyTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPage: this.props.pgNo,
      details: []
    };
    this.MaxPages = 0;
  }

  PrevButton() {
    if (this.state.currentPage === 0) {
      return null;
    } else {
      return (
        <button
          type="button"
          key={this.state.currentPage}
          style={{
            float: "left"
          }}
          onClick={() => {
            this.setState({ currentPage: this.state.currentPage - 1 });
          }}
        >
          Previous Page
        </button>
      );
    }
  }
  newTo() {}

  NextButton() {
    if (this.state.currentPage === this.MaxPages - 1) {
      return null;
    } else {
      return (
        <button
          style={{
            float: "right"
          }}
          key={this.props.pgNo}
          onClick={() => {
            this.setState({
              currentPage: this.state.currentPage + 1
            });
          }}
        >
          Next Page
        </button>
      );
    }
  }

  createTable = () => {
    let tableHeader = (
      <thead>
        <tr>
          {this.props.columns.map(column => {
            return <th key={column.name}>{column.name}</th>;
          })}
        </tr>
      </thead>
    );
    this.state.number = this.state.number + 1;
    let tableRows = [];
    for (
      let i = this.state.currentPage * this.props.maxItems;
      i < (this.state.currentPage + 1) * this.props.maxItems &&
      i <= this.props.data.length;
      i++
    ) {
      let row = (
        <Link
          to={`/user-lists/details/:${i + 1}`}
          params={{
            url: this.props.url
          }}
        >
          //not receiving anything on userdetails
          <tr key={i}>
            {this.props.columns.map(column => {
              return <td key={column.key}>{this.props.data[i][column.key]}</td>;
            })}
          </tr>
        </Link>
      );
      tableRows.push(row);
    }
    for (
      let i = 0;
      i <= Math.ceil(this.props.data.length / this.props.maxItems);
      i++
    ) {
      this.MaxPages = i;
    }

    let tableBody = <tbody>{tableRows}</tbody>;
    return (
      <table>
        {tableHeader}
        {tableBody}
      </table>
    );
  };

  render() {
    return (
      <div className="col-md-6">
        <div className="container-fluid">
          <div
            className="table table-bordered"
            style={{
              marginLeft: "70%",
              marginRight: "5%"
            }}
          >
            {this.createTable()}
            {this.PrevButton()}
            {this.NextButton()}
          </div>
        </div>
      </div>
    );
  }
}

最后是我的userdetails.js页面

import React from "react";
import { Link } from "react-router";
import MyTable from "./table";
export default class Details extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props); //undefined
    this.state = {
      details: []
    };
  }

  componentDidMount() {
    fetch(this.props.location.url + this.props.match.params.id)
      .then(response => response.json())
      .then(res => {
        this.setState({ details: res, isFetching: false });
      });
  }

  render() {
    return <div>{this.state.details}</div>;
  }
}

每次单击用户时，它都不会将我链接到我的用户详细信息页面。我不知道我在做什么错。随时指出您看到的任何错误。

Answer 1

行是tr，不能在Link元素内。

要更改路线而无需链接，只需在表格行上使用onClick。

let row = (
      <tr key={i} onClick={() => history.push(`/user-lists/details/${i + 1}`)}>
        {this.props.columns.map(column => {
          return <td key={column.key}>{this.props.data[i][column.key]}</td>;
        })}
      </tr>
  );

// example of component with route history push {}

export default class MyTable extends React.Component {}
// change component to look like below
class MyTable extends React.Component {}
export default withRouter(MyTable);

我想使用链接将道具传递到我的userdetails页面

1 个答案: