有没有一种方法可以在组件之间传递属性，而不使用props对象

Question

我有一个显示咖啡馆列表的组件。在这个组件(CafeList.jsx(中，会发出一个axios请求，返回一个咖啡馆列表，该列表被映射并呈现给浏览器
我希望用户能够点击一家咖啡馆，然后被引导到一个包含该咖啡馆特定信息的页面(现阶段为CafeReview.jsx(。

我需要将咖啡馆ID(_id(从CafeList传递到CafeReviews，这样我就可以在axios请求中使用它，该请求会带回关于被点击的咖啡馆的特定数据。有什么建议吗？此外，我有正确的总体方法吗？

组件

CafeList.jsx

import React, {useState, useEffect} from 'react'
import axios from 'axios'
import {Link} from 'react-router-dom'

const CafeList = () => {
const [cafes, setCafe] = useState([])
useEffect(() => {
axios.get('/api/all-cafes')
.then(cafe => {
setCafe(cafe.data)
})
.catch(err => {
console.log(err)
})
},[])
return(
<div className = 'cafe-container-container'>
<h2>Cafes</h2>
{
cafes.map(cafe =>{
const {cafeName,photoURL,_id} = cafe

return (
<Link to = {`/cafe-reviews/${_id}`} style={{ textDecoration: 'none' }} >
<div className = 'cafe-container'>
<h2>{cafeName}</h2>
<img src = {photoURL}></img>
</div>
</Link>
)
})
}
</div>
)
}
export default CafeList

CafeReviews.jsx

import React,{useState, useEffect} from 'react'
import axios from 'axios'
const CafeReviews = () => {
const [cafe,setCafe] = useState([])
useEffect(() => {
axios.get('/api/cafe/:id')
.then(result => {
setCafe(result.data)
})
},[])
return(
<div>
{
cafe.map(item => {
return (
<h2>{item.cafeName}</h2>
)
}) 
}
</div>
)
}
export default CafeReviews

路线和数据模型

通过id:获取咖啡馆

app.get('/api/cafe/:id', (req,res) => {
const id =req.params.id
Cafe.findById(id)
.then(result => {
res.send(result)
})
.catch(err => {
console.log(err)
})
})

咖啡馆型号：

const mongoose = require('mongoose')
const Schema = mongoose.Schema
const cafeSchema = new Schema({
cafeName:String,
photoURL:String,
}, {timestamps:true})
const Cafe = mongoose.model('cafes', cafeSchema)
module.exports = Cafe

路由器：

import React from 'react'
import AddReview from './components/AddReview'
import Main from './components/Main'
import AllReviews from './components/AllReviews'
import CafeReviews from './components/CafeReviews'
import './styles.css'
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
const App = () => {
return(
<Router>
<div>
<Switch>
<Route path ='/' exact component = {Main}/>
<Route path ='/add-review' component = {AddReview}/>
<Route path ='/all-reviews' component = {AllReviews}/>
<Route path ='/cafe-reviews/:id' component = {CafeReviews}/>
</Switch>
</div>
</Router>
)
}
export default App;

Answer 1

由于CafeReviews组件是由<Route/>直接呈现的，默认情况下，它会将所有的react router道具传递给它。从那里你可以访问params，它将在URL中包含特定咖啡馆的:id。所以试试这样的东西：

const CafeReviews = ({ match }) => {
const [cafe,setCafe] = useState([])
useEffect(() => {
axios.get(`/api/cafe/${match.params.id}`)
.then(result => {
setCafe(result.data)
})
},[])

尚未测试，可能需要检查文档react-router-dom，看看这是否是正确的对象形状等，但通常情况下，这就是访问组件内部参数的方法