如何从不同的Rout中获取公共组件中的数据？
从不同的Route中获取公共组件中的数据可以通过以下几种方式实现：
- 使用状态管理工具：可以使用像Vuex（Vue.js）或Redux（React）这样的状态管理工具来存储和共享数据。在公共组件中，将需要共享的数据存储在状态管理工具的状态中，然后在不同的Route中通过访问状态来获取数据。
- 使用props传递数据：如果公共组件是通过props接收数据的，可以在不同的Route中通过props将数据传递给公共组件。在公共组件中，通过props接收并使用数据。
- 使用事件总线：可以使用事件总线来在不同的组件之间传递数据。在公共组件中，将需要共享的数据发布到事件总线上，然后在不同的Route中订阅事件并获取数据。
- 使用localStorage或sessionStorage：可以将数据存储在localStorage或sessionStorage中，然后在不同的Route中通过读取localStorage或sessionStorage来获取数据。请注意，这种方法适用于较小的数据量，不适合存储大量数据。
- 使用URL参数：可以通过URL参数将数据传递给不同的Route。在公共组件中，将需要共享的数据作为URL参数传递给不同的Route，然后在Route中通过解析URL参数来获取数据。
需要根据具体的开发框架和需求选择适合的方法来获取公共组件中的数据。
相关·内容
1回答
将react类转换为？
、、、、
有人能帮我把这个转换成反应钩子吗?我相信它会是useState()
import React from "react";
import RGL, { WidthProvider } from "react-grid-layout";
const ReactGridLayout = WidthProvider(RGL);
const originalLayout = getFromLS("layout") || [];
/**
* This layout demonstrates how to sync to localstorage.
*
浏览 10提问于2022-09-03得票数 0
我在我的应用程序中使用redux saga，我有一个登录表单，当我通过身份验证时，我使用重定向组件移动到应用程序，我当然是在更改我的connectedUser状态后执行此操作，就像这样： const initialState = {
loading: false,
user: {},
status: ""
}; 在对状态更改为status:"AUTH"和user: { // user data }进行身份验证时，这是我重定向到应用程序组件的方式，这是我的身份验证组件呈现方法的外观： render() {
if (this.props.co
浏览 7提问于2020-04-24得票数 0
因此，我用登录创建了一个小的react应用程序，它向本地的烧瓶服务器发送ajax请求，该服务器将{token:TOKEN, user:{username:USERNAME,email:EMAIL}}作为JSON返回。
但是，由于我的react应用程序将有多个页面，所以我使用的是ReactRouter，但我不知道如何在多个React.createClass({})实例中全局访问诸如User.username这样的变量。
请记住，我正在做所有这个客户端(直到我移动到响应服务器端呈现)
目前，我将这些类型的变量存储在localStorage中，但这意味着它们不会在UI中自动更新，而不会进行url更改
浏览 3提问于2017-04-16得票数 1
所以我有这个动作： export const getMovieDettails = (id) => (dispatch) => {
dispatch({type: GET_MOVIE_DETTAIL_LOADING})
fetch(`api/movieId/${id}`)
.then(response => response.json())
.then(movie => dispatch({type: GET_MOVIE_DETTAIL_LOADED, payload: movie}))
.catch(e
浏览 7提问于2019-04-23得票数 0
为了计算java脚本中的点击数，我看到一些使用localStorage.clickcount的示例代码，这些代码运行得非常好，但是我们如何才能了解localStorage中存在的所有属性，以便开发人员可以使用相同的属性。我们如何知道JS中localstorage类的所有属性和方法是什么？
浏览 1提问于2016-11-15得票数 1
4回答
嗨，我是新手，在我的项目中对可重用功能进行反应和学习。
我想获取JSON数据，但不必每次都在组件中调用它。
App.js
import React, { Component } from 'react';
import { Route, NavLink, HashRouter } from "react-router-dom";
import logo from '../assets/logo.png';
import './app.css';
import About from "../about/about"
浏览 0提问于2018-09-26得票数 1
我的任务是使用react创建我们的在线商店。到目前为止，我已经成功地使用我们正在开发的API中的数据调用了我们的产品，并且我还能够使用链接将数据从映射的产品列表传递到单个产品页面。
现在唯一的问题是，当用户单击产品列表时，我们希望单个产品出现在与产品列表相同的页面上，可能是作为出现在产品列表之上的组件(而不是链接到单独的页面)。在我的生活中，我似乎找不到一种方法，这样做不会导致错误或应用程序读取参数为未定义。承认，我对此反应很新，所以有可能我错过了一些很明显的东西。
，这是ProductList.js
import React, { useState, useEffect } from
浏览 7提问于2022-08-02得票数 0
回答已采纳
我在React上创建了一个登录和注册表单。看上去：
class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
isLoading: false
};
this.handleClick = this.handleClick.bind(thi
浏览 1提问于2018-06-14得票数 1
我已经看到了新的答案，我的问题，但没有完全回答，所以让我解释一下我想做什么。
我们在我们的网站布局中使用了一个全球性的#app div，这是一个Laravel项目。因此，所有页面都将是相同的主Vue实例，因此我将关键功能分离为组件。
因此，第一个例子只是一个简单的Tab组件，这要么将任何子组件分离成制表符，要么接受一些数据，然后由单个子组件呈现。
因此，下面我从另一个组件注入一些数据，这个ajax组件实际上只是执行一个ajax调用，并使数据在它的槽内可用。
<ajax endpoint="/api/website/{{ $website->id }}/locations/{
浏览 1提问于2018-11-07得票数 0
回答已采纳
我有一个HealthForm组件，用户在文本输入中输入一个url并单击要提交的按钮。我将该url保存为组件中的状态，并调用了一些API，这些API都在工作。问题是，我有几个其他组件需要这个url，而且我似乎找不到将它传递给它们的方法。
我的App.js看起来是这样的，这就是为什么所有其他的帖子/教程都让我感到困惑。
class App extends React.Component {
render(){
return(
<MuiThemeProvider>
<Router>
<d
浏览 0提问于2018-07-28得票数 3
回答已采纳
是否有办法使fetch带来的数据在全球范围内可供其他React组件访问？
目前，我有一个名为page.json的json文件，其数据如下所示：
{
"logo": {
"src": "images/logo.png"
},
"logout": {
"text": "Logout"
},
"comingSoon": {
"title": "There's more to come!",
"text"
浏览 1提问于2018-04-17得票数 0
回答已采纳
2回答
我必须找到一个在React中的组件之间共享信息的解决方案。用例是，在网上商店中，当客人试图将产品添加到他的愿望列表时，他应该被重定向到注册页面，注册后应该自动添加到他的愿望列表中。我尝试了window.localStorage并使其工作，但我被告知没有必要这样做，页面有点复杂，组件没有共同的祖先--组件树是这样的。
<App>
<Routes>
<SearchPage>
<Gallery>
<GalleryItem>
<AddToListButton>
浏览 3提问于2022-03-10得票数 0
1回答
VueJS更新边栏组件
、、、、
我有一个更新组件的问题。我来解释一下： 我有一个带有VueJS和Vuex的单页应用程序。我的App.vue是这样的： <template>
<div class="wrapper">
<Sidebar></Sidebar>
</div>
</template>
<script>
import Sidebar from "../components/Menu/Sidebar";
export default {
name: 'App'
浏览 11提问于2020-08-29得票数 1
回答已采纳
您可以将道具传递给子路由的组件(同时使用React路由器)，方法是将道具传递给子组件的Route组件，并通过this.props.route.propName访问该路由的子组件中的支持。
子组件所需的道具是其父组件状态的一部分，而不仅仅是一些与组件无关的数据。
因为
在<Router />中，父App的状态不在作用域中，不能将其传递给子<Route />中的组件，或者
父组件中对子组件的所有引用都是{this.props.children}而不是<aComponent data={this.state.somePortion} />，因此不能通过表达
浏览 2提问于2017-01-04得票数 1
因此，在更新组件上的状态时，我遇到了问题。this.state.authenticated被传递给导航以隐藏/显示登录/注销按钮。但是，一旦用户登录状态，更改就不会重新启用导航。我必须手动刷新页面，以查看navbar重登并显示注销按钮。
这是代码
const token = window.localStorage.getItem("token");
class App extends Component {
constructor(props) {
super(props);
this.state = {
authenticated: fals
浏览 5提问于2017-10-06得票数 0
回答已采纳
我的App.js文件的结构是这样的:页眉和页脚总是存在的，而不管用户在哪个页面。问题是，当用户修改并行组件中的某些数据时，链接会将用户转移到默认页面，但标题中的数据不会被修改。只有在用户设置了其他组件中的操作后刷新页面时，标头才会更新。如果有帮助，数据来自localStorage。我试过钻探道具和摆弄国家，但没有成功。以编程方式刷新页面也会给我带来不想要的行为。
修改数据的路径为
<Route path="/item/:id" render={(props) => <Item {...props} />}/>
下面是app.js文件：
App.js
浏览 1提问于2021-02-09得票数 0
我有组件A，它有两个子组件C1和C2。在C1组件中，有一个函数使用它从C2中相同的源获取数据。对于C1
<template>
</template>
<script>
export default {
url = 'abc.com';
name: 'c',
data () {
return {
users:'',
}},
methods: {
getData: function () {
$.get(url, function( data ) {
浏览 1提问于2017-09-27得票数 1
回答已采纳
3回答
我的代码的重要部分如下所示。
路由：
<Route path="/login" component="Login">
<Route path="/login/lender" component="LenderLogin"/>
<Route path="/login/customer" component="CustomerLogin"/>
</Route>
在登录内部呈现：
<div>
<form>
浏览 0提问于2017-01-02得票数 1
我有Main组件，它包含以下代码，并且工作正常。
<Switch>
<Route path='/compare' component={Compare} />
<Route exact path='/' component={Home} />
<Route path={`/search`} component={Search} />
<Route path={`/:vehicleId`} component={VehicleDetail} />
</Switch>
上面看到的Search组件
浏览 1提问于2018-07-30得票数 1
回答已采纳
我有一个带有表单的React组件，我需要做的是捕获用户名，然后使用sessionstorage保存它。
这是我目前正在尝试的，但它没有保存它。
代码如下：
class Login extends Component {
constructor(props) {
super(props);
this.state = {
password: '',
redirect: false,
};
this.onUsernameChange = this.onUsernameChange.bind(this);
this.
浏览 12提问于2017-06-30得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
