如何在 React Js 中的路由映射数组上传递道具

Question

如何在映射的路线数组上传递道具？假设您有超过 5 个链接，并且您只想将每个路由作为路由组件内的数组中的一个对象，假设每个需要的组件都已导入，这是我的 RouteList 组件：

const routeList = [
  {
    path:"/",
    render: props => (<Home {...props} users={users} deleteUser={props.deleteUser} />)
  },
  {
    path:"/about",
    component:"About"
  }, etc];

class RouteList extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const routeComponents = routelists.map(
      ({ path, component, render }, key) => (
        <Route
          exact
          path={path}
          component={component}
          render={render}
          key={key}
        />
      )
    );
    return <div>{routeComponents}</div>;
  }
}

export default RouteList;

如您所见，我将渲染作为对象属性添加到主路由，因此我可以包含道具。现在在我的 App.js 中，我像这样导入了上面的 RouteList：

import RouteList from "./components/routelist";

class App extends React.Component {
  constructor(props) {
    super(props);
    UniqueId.enableUniqueIds(this);
    this.state = {
      users: [
        { id: this.nextUniqueId(), name: "Louise", age: 28 },
        { id: this.nextUniqueId(), name: "Karen", age: 24 },
        { id: this.nextUniqueId(), name: "Jared", age: 32 },
        { id: this.nextUniqueId(), name: "Noime", age: 28 }
      ]
    };
    this.deleteUser = this.deleteUser.bind(this);
  }

  deleteUser = (index, e) => {
    const { users } = this.state;
    const newUsers = Object.assign([], users);
    newUsers.splice(index, 1);
    this.setState({
      users: newUsers
    });
  };
  render() {
    const { users } = this.state;
    return (
      <Router>
        <div className="App">
          <Navigation />
          <main>
            <Switch>
              <RouteList users={users} />
            </Switch>
          </main>
        </div>
      </Router>
    );
  }
}

我收到一个引用错误：RouteList 组件中未定义用户。或类型错误：“无法读取未定义的属性 'map'”。

这是我的 Home 组件：

import React from "react";
import Users from "../users";

const HomePage = props => {
  return (
    <div className="contentContainer">
      <header className="pageHeader">
        <h1>Home</h1>
      </header>
      <ul id="user-list">
        {props.users.map((user, index) => {
          return (
            <Users
              age={user.age}
              key={user.id}
              index={index}
              deleteEvent={props.deleteUser}
            >
              {user.name}
            </Users>
          );
        })}
      </ul>
    </div>
  );
};

export default HomePage;

Answer 1

在渲染方法中移动这个。

const routelists = [
  {
    path: "/",
    render: props => (
      <Home {...props} users={this.props.user} deleteUser={props.deleteUser} />
    )
  },
  {
    path: "/about",
    component: About
  }
];

Answer 2

你正在尝试在 routeList 数组中使用 props，但你将无法在类声明之外访问 props，这就是构造函数/超级方法的用途。

你也没有在任何地方声明路由列表，所以没有什么要映射的。

试试这样的：

 import Home from ....
 class RouteList extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const routelists = [
      {
        path:"/",
        render: props => (<Home {...this.props} users={this.props.users} 
        deleteUser={this.props.deleteUser} />)
      },
      {
        path:"/about",
        component:"About"
      }, etc];

    const routeComponents = routelists.map(
      ({ path, component, render }, key) => (
        <Route
          exact
          path={path}
          component={component}
          render={render}
          key={key}
        />
      )
    );
    return <div>{routeComponents}</div>;
  }
}

export default RouteList;