Question

尝试使用react-router-dom通过路由器将道具传递给组件时遇到麻烦。

经过一些搜索，我知道我必须使用内联函数的render方法，但是使用以下代码，我遇到了一个错误（无法读取未定义的属性“ map”）。我尝试了多种方法，但没有设法使它起作用。唯一有效的是当我输入直接值（例如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);

感谢您的帮助。

Answer 1

您是否尝试重命名渲染路线的props参数以查看是否与{ "processGroupRevision": {…}, "variableRegistry": { "variables": [{ "variable": { "name": "value", "value": "value", "processGroupId": "value", "affectedComponents": [{…}] }, "canWrite": true }], "processGroupId": "value" }, "disconnectedNodeAcknowledged": true }命名冲突

const Content = props => {

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

<Route path="/charactersSelection" render={p => (<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中将道具传递给Router

2 个答案: