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

【问题标题】：Cannot pass props to Router in react-router-dom无法将道具传递给 react-router-dom 中的路由器
【发布时间】：2018-08-01 06:17:25
【问题描述】：

我在尝试使用 react-router-dom 通过路由器将 props 传递给组件时遇到了一些麻烦。

经过一番搜索，我知道我必须将渲染方法与内联函数一起使用，但使用以下代码时，出现错误（无法读取未定义的属性“映射”）。我尝试了多种方法，但没有成功。唯一有效的是当我输入一个直接值（如 100 或“测试”）时。

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

我们将不胜感激，谢谢。

【问题讨论】：

标签： javascript reactjs react-router-dom react-props

【解决方案1】：

从数组数据中删除静态，无需放入函数，见例子：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);

【讨论】：

【解决方案2】：

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

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

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

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

应该工作

【讨论】：