在组件React JS之间传递数据

因此,我将其与一个组件(news2)配合使用,并尝试与另一个称为“专业骑手”的组件进行相同的操作,如果我手动键入url,则可以获取单个骑手的信息,但无法获取要呈现的列表。骑手,不知道为什么,感觉是如此接近

可以肯定的是,在专业骑手组件的某处我走错了一条路,但是我一生都无法解决,我最初是使用来自React Router Dom的开关进入一条路线,然后我有一条页面,这是我现在无法呈现的页面,应该具有指向单个骑手页面的链接,如果我输入url localhost3000:// prolist / 1,则会从数据中获得第一个骑手

App.js

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

import './App.css';
import Home from './components/Home/Home'
import ProList from './components/ProRiders/ProList';
import Nav from './components/Navigation/Nav';
import RidingTips from './components/RidingTips/RidingTips';
import BoardCare from './components/BoardCare/BoardCare';
import PostList from './components/News2/PostList';

function App() {
  return (
    <Router>
      <div className="App">
        <Nav />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/prolist" component={ProList} />
          <Route path="/ridingtips" component={RidingTips} />
          <Route path="/postlist" component={PostList} />
          <Route path="/boardcare" component={BoardCare} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Nav.js

import React from 'react';
import '../../App.css';
import {Link} from 'react-router-dom';
import logo from '../../Images/OWN_logo.png';


// import OWN_logo from '../../Images/OWN_logo';


function Nav() {
  return (
    <nav>
      <img id="nav_logo" src={logo} alt="logo" />
      <ul className="nav-links">
        <Link to="/">
          <li>Home</li>
        </Link>
        <Link to="/postlist">
          <li>News</li>
        </Link>
        <Link to="/prolist">
          <li>Pro Riders</li>
        </Link>
        <Link to="/boardcare">
          <li>Board Care</li>
        </Link>
        <Link to="/ridingtips">
          <li>Riding Tips</li>
        </Link>
      </ul>
    </nav>
  );
}

export default Nav;

Ridesr.js(数据)

export const Riders ={
  riders: [
    {
      id: 1,
      name: "Chris Richardson",
      location: "Dummy Location",
      Competitions: "",
      Sponsonrs: "",
      Ig: "",
      Fb: ""
    },
    {
      id: 2,
      name: "Max Cramer",
      location: "London, UK",
      Competitions: "Non",
      Sponsonrs: "Wick Boards | HopBar UK | SkatetecUK | OWN",
      Ig: "http://instagram.com/m__row",
      Fb: ""
    },
    {
      id: 3,
      name: "Jeff McCosker",
      location: "Sacramento, CA, USA",
      Competitions: "Non",
      Sponsonrs: "The Float Life (Owner)",
      Ig: "http://instagram.com/thefloat.life",
      Fb: ""
    }
  ],
  all: function() { return this.riders },
  get: function(id) {
    const isRider = r => r.id === id
    return this.riders.find(isRider)
  }
};

ProList.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';

import FullRiderList from './FullRiderList';
import Rider from './Rider';

const ProList = () => (
  <Switch>
    <Route exact path='/prolist' componet={FullRiderList}/>
    <Route path='/prolist/:id' component={Rider}/>
  </Switch>
)

export default ProList;

ProRidersPage.jsx     从'react'导入React;     从'./FullRiderList'导入FullRiderList;

function ProRidersPage() {
    return (
        <div>
            <h1>Pro Rider Interviews</h1>
            <FullRiderList />
        </div>
    )
}

export default ProRidersPage;

FullRidersList.jsx

import React from 'react';
import {Link} from 'react-router-dom';

import {Riders} from '../../Data/Riders';

const FullRiderList = () => (
  <div>
    <ul>
      {
        Riders.all().map(r => (
            <li key={r.id}>
              <h3>{r.location}</h3>
              <Link to={`/riderlist/${r.id}`}>{r.name}</Link>
            </li>
        ))
    }
    </ul>
  </div>
);

export default FullRiderList;

Rider.js

import React from 'react';

import {Riders} from '../../Data/Riders';

const Rider = (props) => {
    console.log("Reached the rider page");
    const Rider = Riders.get(
        parseInt(props.match.params.id)
    )
    if(!Rider) {
        return <div>Sorry but no Rider was found</div>
    }
    return (
        <div>
            <h1>Pro rider single page </h1>
            <h2>{Rider.name}</h2>
            <h3>{Rider.location}</h3>
        </div>
    )
}

export default Rider;
评论