如何解决将变量传递到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
值是我要用来在<Route path="/detail" exact component={() => <Detail />} />
上方导航/切换所引用的组件中呈现正确数据的值
我如何:
- 链接到
Detail
路线和 - 将事件的
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;
解决方法
解决了这个问题。
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)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。