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

大佬教程收集整理的这篇文章主要介绍了有没有一种方法可以在组件之间传递属性而不使用 props 对象？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

我有一个显示咖啡馆列表的组件。在这个组件 ( 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,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 scheR_545_11845@a = mongoose.scheR_545_11845@a

const cafescheR_545_11845@a = new scheR_545_11845@a({
    cafename:string,photoURL:string,},{timestamps:truE})

const cafe = mongoose.model('cafes',cafescheR_545_11845@a)

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;

解决方法

const cafeReviews = ({ match }) => {
  const [cafe,setCafe] = useState([])

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

大佬总结

以上是大佬教程为你收集整理的有没有一种方法可以在组件之间传递属性而不使用 props 对象？全部内容，希望文章能够帮你解决有没有一种方法可以在组件之间传递属性而不使用 props 对象？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。