无法在 react-router-dom 中将道具传递给路由器

Question

我在尝试使用 react-router-dom.

通过路由器将 props 传递给组件时遇到了一些问题

经过一番搜索，我知道我必须使用带有内联函数的渲染方法，但是使用以下代码时，我遇到了错误（无法读取未定义的属性 'map'）。我尝试了多种方法，但没能成功。唯一有用的是当我输入一个直接值时（比如 100 或 'test'）。

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const CharactersSelection = props => {
  return (
    <div>
      <div className="row">
        {props.availableCharacters.map((number, i) => <span>{i}</span>)}
      </div>
    </div>
  );
};

const Content = props => {
  return (
     <Router>
      <div className="content row">
        <div className="menu col-3">
          <div>
            <Link to="/" class="bm-item">
              <i class="fas fa-fw fa-home" />
              <span>Accueil</span>
            </Link>
            <Link to="/charactersSelection" class="bm-item">
              <i class="fas fa-fw fa-play-circle" />
              <span>Nouvelle Partie</span>
            </Link>
          </div>
        </div>
        <div className="contentGame col-9">
          <div>
            <Route exact path="/" component={Home} />
            <Route path="/charactersSelection" render={props => (<CharactersSelection {...props}
              availableCharacters={props.availableCharacters}/>)}/>
          </div>
        </div>
      </div>
    </Router>
   );
};

class App extends React.Component {
  static availableCharacters = () => [
    { imgName: "base_loup.png", name: "Loup Garou", maxInGame: 4 },
    { imgName: "base_simple_villageois.png",name: "Simple Villageois",maxInGame: 10},
    { imgName: "base_chasseur.png", name: "Chasseur", maxInGame: 1 },
    { imgName: "base_petite_fille.png", name: "Petite Fille", maxInGame: 1 },
    { imgName: "base_sorciere.png", name: "Sorcière", maxInGame: 1 },
    { imgName: "base_cupidon.png", name: "Cupidon", maxInGame: 1 },
    { imgName: "base_voleur.png", name: "Voleur", maxInGame: 1 },
    { imgName: "base_voyante.png", name: "Voyante", maxInGame: 1 }
  ];

  render() {
    return (
      <div>
        <Content availableCharacters={this.availableCharacters} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

将不胜感激，谢谢。

Answer 1

您是否尝试重命名您的渲染路由的 props arg 以查看是否与 const Content = props => {

存在命名冲突

<Route path="/charactersSelection" render={p => (<CharactersSelection {...props} />)}/>

实际上，我认为您也不需要 arg 道具 :

<Route path="/charactersSelection" render={() => (<CharactersSelection {...props} />)}/>

应该可以

Answer 2

从数组数据中删除静态，无需放入函数，参见示例：https://codesandbox.io/s/mzz54j08

import React from "react";
import ReactDOM from "react-dom";

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const CharactersSelection = props => {
  return (
    <div>
      <div className="row">
        {props.availableCharacters.map((number, i) => <span>{i}</span>)}
      </div>
    </div>
  );
};

const Content = props => {
  return (
    <Router>
      <div className="content row">
        {console.log(props.availableCharacters)}
        <div className="menu col-3">
          <div>
            <Link to="/" class="bm-item">
              <i class="fas fa-fw fa-home" />
              <span>Accueil</span>
            </Link>
            <Link to="/charactersSelection" class="bm-item">
              <i class="fas fa-fw fa-play-circle" />
              <span>Nouvelle Partie</span>
            </Link>
          </div>
        </div>
        <div className="contentGame col-9">
          <div>
            <Route
              path="/charactersSelection"
              component={() => <CharactersSelection {...props} availableCharacters={props.availableCharacters} />}
            />
          </div>
        </div>
      </div>
    </Router>
  );
};

class App extends React.Component {
  availableCharacters = [
    { imgName: "base_loup.png", name: "Loup Garou", maxInGame: 4 },
    { imgName: "base_simple_villageois.png", name: "Simple Villageois", maxInGame: 10 },
    { imgName: "base_chasseur.png", name: "Chasseur", maxInGame: 1 },
    { imgName: "base_petite_fille.png", name: "Petite Fille", maxInGame: 1 },
    { imgName: "base_sorciere.png", name: "Sorcière", maxInGame: 1 },
    { imgName: "base_cupidon.png", name: "Cupidon", maxInGame: 1 },
    { imgName: "base_voleur.png", name: "Voleur", maxInGame: 1 },
    { imgName: "base_voyante.png", name: "Voyante", maxInGame: 1 }
  ];

  render() {
    return (
      <div>
        <Content availableCharacters={this.availableCharacters} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

无法在 react-router-dom 中将道具传递给路由器

Cannot pass props to Router in react-router-dom

javascript

reactjs

react-router-dom

react-props