时间戳

首页 > 解决方案 > 在 react-bootstrap 中将变量传递给页面

html - 在 react-bootstrap 中将变量传递给页面

问题描述

我有一个结构如下的网站：

Public
 | index.html
src
  index.css
  index.js
  | components
      App.js
      Events.js
      Feed.js
      Detail.js
      Entry.js
      ...

中的所有内容都<App />在 index.html 中呈现

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Navigation, Footer, Home, Feed, Search, About, Contact } from "../components";


function App() {
  return (
<Router>


      <Navigation />

      <Switch>
        <Route path="/" exact component={() => <Home />} />
        <Route path="/feed" exact component={() => <Feed />} />
        <Route path="/detail" exact component={() => <Detail />} />
        <Route path="/search" exact component={() => <Search />} />
        <Route path="/about" exact component={() => <About />} />
        <Route path="/contact" exact component={() => <Contact />} />
      </Switch>

      <Footer />

    </Router>
  )
}

export default App

该Feed组件呈现一系列，Events每一个都有一个event.id.

该event.id值是我想用来在上面 Navigation / Switch 引用的组件中呈现正确数据的值<Route path="/detail" exact component={() => <Detail />} />

我怎样才能：

  1. 链接到Detail路线和
  2. id将事件的传递给Detail该路由中的组件
import React, {Component} from "react";
import Header from "./Header"
import Events from "./Events"

class Feed extends Component {

  state = {
  events: []
}

componentDidMount() {
  fetch('http://127.0.0.1:5002/events')
  .then(res => res.json())
  .then((data) => {

    this.setState({ events: data })

  })
  .catch(console.log)
}



render() {
  return (
    <div className="feed">
    <Header />
      <div class="container">

          <Events events={this.state.events} />
        
      </div>
    </div>
  );
}
}
export default Feed;

import React from 'react';
import Accordion from 'react-bootstrap/Accordion'
import Card from 'react-bootstrap/Card'
import Alert from 'react-bootstrap/Alert'
import Button from 'react-bootstrap/Button'
import './App.css'


function Events ({events}){


  return (
    <div>
      <center><h1>Event List</h1></center>
      {events.map((event) => (
        <div class="mt-2">

        <Accordion defaultActiveKey="0" className="rounded ">
          <Card className="rounded">
            <Accordion.Toggle as={Alert} variant="secondary" eventKey={event.id} className="accordion-title border-0"><span className="badge badge-secondary">{event.date}</span><span> </span><span>{event.title}</span>
            </Accordion.Toggle>
            <Accordion.Collapse eventKey={event.id} className="accordion-collapse">
            <Button href="detail" variant="secondary" size="lg" disabled>Link</Button>
              <Card.Body className="rounded">{event.summary}</Card.Body>
            </Accordion.Collapse>
          </Card>
        </Accordion>

        </div>
      ))}

    </div>
  )

}
export default Events;

以上三个渲染如下：

在此处输入图像描述

下面的Detail组件需要接受该{route}值，以便我可以调用 API。我只是不知道如何在调用时将该值接受到类中。

import React, {Component} from "react";
import Detail from "./Detail"

class Detail extends Component {

  state = {
  entries: []
}

componentDidMount({route}) {
  fetch('http://127.0.0.1:5002/events/'+{route}+'/')
  .then(res => res.json())
  .then((data) => {

    this.setState({ entries: data })

  })
  .catch(console.log)
}



render() {
  return (
    <div className="entries">
    <Header />
      <div class="container">
        <div class="row align-items-center my-5">

          <Entry entry={this.state.entries} />
        </div>
      </div>
    </div>
  );
}
}
export default Detail;

标签： htmlreact-bootstrap

解决方案

修复了这个。

App.js 已更新为将变量包含在开关中:event_id

  <Switch>
    <Route path="/" exact component={() => <Home />} />
    <Route path="/search/:query" exact component={() => <Search />} />
    <Route path="/feed" exact component={() => <Feed />} />
    <Route path="/detail/:event_id" component={Detail} />
    <Route path="/blog" exact component={() => <Blog />} />
    <Route path="/about" exact component={() => <About />} />
    <Route path="/contact" exact component={() => <Contact />} />
  </Switch>

页面链接已更新，包括路径和event.id

<div><span><Link to={`/detail/${event.id}`}>{event.title}</Link></span></div>

并Detail.js componentDidMount()调用与变量名匹配的道具：

componentDidMount() {

  fetch('http://127.0.0.1:5002/events/'+this.props.match.params.event_id+'/entries')
  .then(res => res.json())
  .then((entryData) => {

    this.setState({ entries: entryData })

  })
  .catch(console.log)

}

推荐阅读