如何从React中的另一个组件读取变量？
在React中，可以通过props将变量从一个组件传递到另一个组件。以下是一种从React中的另一个组件读取变量的方法：
- 在父组件中定义一个变量，并将其作为props传递给子组件。
// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
variable: 'Hello World',
};
}
render() {
return (
<div>
<ChildComponent variable={this.state.variable} />
</div>
);
}
}
export default ParentComponent;- 在子组件中通过props接收父组件传递的变量，并使用它。
// 子组件
import React from 'react';
class ChildComponent extends React.Component {
render() {
return (
<div>
<p>{this.props.variable}</p>
</div>
);
}
}
export default ChildComponent;在上述示例中，父组件通过props将变量variable传递给子组件ChildComponent。子组件通过this.props.variable来读取并使用该变量。
这种方法适用于在React应用程序中从一个组件向另一个组件传递数据。您可以根据需要在父组件中更新变量的值，并且子组件将自动接收到最新的值。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云产品：https://cloud.tencent.com/product
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobile
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
- 腾讯云音视频处理（VOD）：https://cloud.tencent.com/product/vod
相关·内容
这是我的App.js
import React from 'react';
import './App.css'
import Tools from './components/class/Tools'
import Loading from './components/inc/Loading'
export default class App extends React.Component {
componentDidMount() {
Tools.showLoading();
}
r
浏览 0提问于2021-06-17得票数 0
我想在服务器响应时将加载状态更改为false，但我不知道如何在发生时更改状态。响应在另一个组件中，进度条在另一个组件中。一个简单的例子如下所示： const Form: React.FC = () => {
axios.get(someUrl).then(
// changing a state to set the progress bar off
).catch(//catching error);
...
} const Header: React.FC = () => {
const [loading, setLoading] = useSta
浏览 30提问于2019-10-10得票数 0
回答已采纳
我是React JS的新手，我正在尝试了解如何从文件导出变量并将其导入到另一个文件中。我尝试的是这样的： 文件App.js： import React from 'react'
function App() {
[hi, setUpHi] = useState('Hello World')
return (
<div className='App'>
<Test />
</div>
);
}
export default App
export {hi} 文件
浏览 13提问于2021-09-01得票数 0
回答已采纳
目前，我有一个对象列表页。我想显示单个对象的详细信息页(所有事情都是用Reactjs完成的)。列表对象具有如下链接：
<Link to={'/detail/'+this.props.data.id} >Read more</Link>
点击链接，它指向另一个页面，我想在其中显示该特定对象的所有细节。该特定对象的详细信息是从55，获取的，其中55是对象的id。我使用Redux从API中获取数据。
ListingPage.js
import React from 'react';
import { BrowserRouter as Rou
浏览 0提问于2018-03-10得票数 3
回答已采纳
因此，我正在为联系人表单制作一个ReactJS组件。现在，我想要创建一个方法，从JSX中的输入中获取值，然后在另一个文件中获取该方法从组件外部返回的值。这个是可能的吗？
我的组件文件：
//Inporting React.
import React from 'react';
//Creating the contactForm Component
class ContactForm extends React.Component{
render(){
return (
<form onSubmit={this.props
浏览 2提问于2022-05-13得票数 0
回答已采纳
2回答
如何在Redux中存储和访问图像
、、、、
如何将图像存储在redux中，然后在另一个组件中访问它？我的目标是使用TextInput保存映像url，并在另一个组件中显示实际的映像。我不知道如何从主配置文件中访问图像。下面是我在配置文件中保存图像的代码：
import React from 'react';
import { StyleSheet, TextInput, View, Button, Vibrate } from 'react-native';
import { connect } from 'react-redux';
import {saveProfile} from &
浏览 0提问于2018-11-21得票数 1
2回答
我需要使用另一个来源的虚拟助手(并且需要使用这个var)。
<script>
var chat_client = 'big',
chat_mode=2,
ailabs_user_id = null,
ailabs_user_info = {'user_intent_category_label':'DEFAULT', 'info_fullname':'Ержанов Ануар Толегенович', 'inf
浏览 1提问于2019-12-26得票数 1
回答已采纳
1回答
我刚刚开始为我的react应用程序探索一个单元测试框架。我将我的选择锁定在@testing-library/react而不是Enzyme，这是React推荐的，并且有助于编写更健壮的测试。为了完整起见，我还计划使用Jest。
但在我开始React Testing Library之前，我只想问几个问题。有人能帮忙吗？
例如,
有一个基于用户输入更新Redux存储的Editor组件，有另一个组件Preview直接从存储中读取值，还有第三个组件Container，它包含上述两个组件传递一些道具。<code>H 213</code><code>G 214</c
浏览 1提问于2020-05-27得票数 3
回答已采纳
假设我正在页面上呈现一个注册组件。我有一个按钮，上面写着提交和登录。当我单击登录按钮时，我希望它替换注册组件，而不必转到另一个页面。只是想知道，从概念上讲，我应该如何实现onclick处理程序。我需要使用react路由器吗？
浏览 10提问于2016-08-11得票数 1
假设我在React-Apollo中有以下GraphQL查询
const CurrentUserForLayout = gql`
query CurrentUserForLayout($avatarID: Int!) {
currentUser {
avatar_url(avatarID: $avatarID)
}
}
`;
const ProfileWithData = graphql(CurrentUserForLayout, {
options: { variables: { avatarID: 1 } },
})(Profile);
现在，如果我
浏览 0提问于2017-01-01得票数 12
回答已采纳
1回答
我有一个主干文件，在其中，我使用React.renderComponent呈现一个React.renderComponent (Timer)。但是，在react组件中，我有一个状态呼叫计数器。我想从主干文件中获取这个组件的状态。虽然我将一个props.model传递给计时器，但我可以在定时器内部修改这个道具，但这将使props.model中的数据持久化，这是我不想做的。
由于Timer不是React组件的子程序，所以我无法使用refs访问Timer.stat。那么，是否有一种方法可以在其父级中获取Timer的状态？
非常感谢！
浏览 2提问于2015-10-20得票数 1
如何在redux上访问browserHistory？我要把browserHistory从react-router传递给browserRouter。我想要一个减速机听一个动作和推送另一个url。最好的解决办法是什么？
浏览 0提问于2017-12-14得票数 2
回答已采纳
我试图从另一个有用户信息的切片中导入一个值，知道我为什么会犯这个错误吗？我读到从其他切片请求数据是正常的，错误似乎是切片找不到存储。下面是我的代码结构，我的商店在我的应用程序顶部，这个getState函数只在一个组件中工作，而不是在片到另一个片中工作。
import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter } from 'react-router-dom';
import App from './App';
import
浏览 7提问于2022-06-25得票数 0
回答已采纳
现在，我有一个侧边栏，我想要使用的各种形式和信息比特。我正在使用全局事件系统触发侧边栏的打开，但我不知道如何将react组件注入侧栏react组件。
我从尝试这个开始
componentWillMount: ->
window.toggleSidebar = (react_component)=>
React.renderComponent(react_component(), document.getElementById('sidebar-content'))
@toggleSidebar()
但是，一旦所有组件都被挂载，它就无法工作，因为您
浏览 1提问于2014-10-13得票数 3
回答已采纳
我正在使用react中的搜索栏，它将在另一个文件中调用unsplash- api，我有一个搜索栏组件，我正在考虑在主文件中进行api调用，或者在src文件夹中的另一个文件中进行api调用。
到目前为止，我已经设置了一个组件并设置了初始钩子，但我不知道如何继续
import React, { useState } from 'react';
import './SearchBar.css';
const SearchBar = () => {
const [search, setSearch] = useState('');
ret
浏览 0提问于2019-07-30得票数 3
1回答
如何导出react.js的状态变量？这意味着我们在react.js中有一个状态变量，并且这个状态变量需要在另一个组件中，然后我们如何导出该组件。
浏览 4提问于2022-01-26得票数 -2
1回答
从组件外部更新状态
、、、、
我正在尝试使用JWT在我的React应用程序中实现身份验证。登录后，服务器发送access token和refresh token。访问令牌在一小时内过期，而刷新令牌则持续一年。两者都存储在localStorage中。
我正在使用axios向服务器发出请求。我已经创建了一个文件api.js，它创建了一个为请求设置baseURL的axiosInstance。这个文件导出这个axios实例和所有其他想要使用axios的组件/文件，从这个文件导入它- api.js。我还在同一个文件中设置了一个axios interceptor，该文件将在发送请求之前修改每个请求。如果令牌没有过期，它基本上会在au
浏览 1提问于2021-07-30得票数 0
我正在尝试从svg导入一个React，然后将它作为一个支柱发送到另一个组件，以呈现functionComponent。使用下面的设置，这将编译得很好，但是当试图在浏览器中呈现svg时，它最终会崩溃：
错误:对象作为React子对象无效(找到:键为{$$typeof的对象，呈现})。如果您打算呈现一个子集合，请使用数组代替。
下面的类是简化的。但我想做的是：
在overlay.tsx中：
import { ReactComponent as icon } from "/icon.svg";
import CustomItem from "/customItem&#
浏览 5提问于2020-04-15得票数 4
是否有一种方法可以保存React函数组件的位置的值，即使在卸载之后也是如此，这样一旦重新挂载，它的值就不会改变吗？
我是新来的反应。我的问题听起来可能很简单。
我在这个位置发送一些会话值，下面是从另一个函数组件发送的函数组件ConsolePage。但是，当ConsolePage被卸载并再次挂载时，我以前发送的值将被擦除。
控制台组件
const ConsolePage: React.FC<ConsoleProps> = ({
history,
isAdmin
}) => {
const [showModal, setShowModal] = useSta
浏览 3提问于2020-11-02得票数 0
我想要在另一个组件的作用域中获取投资变量...
我已经写好了下面的代码，但是既然我已经导出了函数InvestmentsList，我怎么才能得到这个常量投资呢？如果不借助react-redux中的useSelector()，该如何做到这一点呢？
import React, { useEffect, useState } from 'react';
import {
Card,CardBody,CardHeader,CardTitle,Col,Row,Table} from 'reactstrap';
import moment from 'moment
浏览 31提问于2021-05-19得票数 0
回答已采纳
1回答
我的情况是我有两个FlatList组件(A和B)。
A是我的第一个屏幕。我使用react-navigation将A导航到B，B将在headerLeft上显示反箭头。当我单击箭头时，它将返回到A。但是FlatList的数据仍然显示B，即使它真的在A中.
我的数据来自react-redux的fetch API，我认为问题来自于react-redux。因为我测试了一个没有react-redux的简单测试。问题已经解决了。
我想使用创建我的项目。我试着使用shouldComponentUpdate
shouldComponentUpdate = (nextProps, nextState) =>
浏览 0提问于2018-05-02得票数 0
回答已采纳
2回答
我在我的应用程序中使用了react本机mpaboxgl。
import MapboxGL from "@mapbox/react-native-mapbox-gl";
<MapboxGL.MapView
logoEnabled={false}
attributionEnabled={false}
ref={(e) => { this.oMap = e }}
zoomLevel={6}
centerCoordinate={[54.0, 24.0]}>
<MapboxGL.MapView>
如何在另一个组件中使用oMap？因
浏览 2提问于2019-04-09得票数 2
回答已采纳
谁能告诉我如何从运行在Jenkins管道中的docker文件中选择一个环境变量到我的React组件中？
浏览 25提问于2018-08-02得票数 0
在Mobx (mobx- React )中，我们可以在这样的React组件中“注入”存储：
@inject('store')
@observer class Abc extends React.Component {
}
这导致Abc将store作为类似于this.props.store的prop获得。但是inject如何将store映射到实际的商店呢？
浏览 0提问于2018-04-01得票数 1
回答已采纳
我还没反应过来。
我想知道，如何将数据从“主页”传输到另一个页面以显示结果？
我想这和道具有关吧？但我不完全确定。
我的MainPage有输入/选择标签，包含名称、值、用户的选择和日期。
我希望能够获取所有这些信息，并将其输出到另一个名为"DisplayResults“的页面中，并可能将这些数据用于其他方面，或者创建一个包含这些信息的表。
非常感谢你的帮助！
，这是我的app.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router,
浏览 4提问于2017-01-31得票数 10
回答已采纳
2回答
Form.js
import React from 'react'
export default class Form extends React.Component{
handlePatientDisease(e){
this.setState({
patientdisease: e.target.value
})
}
handlePatientPresentIllness(e){
this.setState({
patientpresentil
浏览 2提问于2016-07-12得票数 1
回答已采纳
是否有可能通过浏览器(从另一个脚本内部或通过控制台)访问和设置现有React组件的状态和属性？
我知道使用Angular有一种方法可以访问作用域并更改变量，但是使用React我还没有找到一种方法。
我假设肯定有某种方法，因为Facebook的React Developer Tools扩展能够从页面上的React组件获得所有信息(Props，State，Component，Event Listeners)，并有可能对其进行更改。
如果有可能通过JavaScript做到这一点，那么哪种方式是可行的呢？
浏览 1提问于2015-05-13得票数 22
2回答
我使用React从组件中的两个选项元素接收这两个值。问:如何从另一个组件读取这两个变量？ const handleInputChange = (e) => {
const valueFilterActive = document.getElementById("activeFilter").value;
const valueFilterName = document.getElementById("bussFilter").value;
alert(valueFilterName+valueFilterActive);
浏览 52提问于2020-09-20得票数 1
回答已采纳
我的路由路径位于分隔的文件中，该文件只包含路由，仅此而已，这是我在其中导入的唯一文件，React-router-dom。问题是，我想在另一个js文件中指定一个按钮，它将执行goBack()函数，但我不想在这里导入react-router-dom，而是从主js文件继承react-router-dom。因此，我在我的App.js中添加了这一行(这是只有路由的主文件)
constructor(props) {
super(props);
this.goBack=this.goBack.bind(this);
}
goBack(){
t
浏览 0提问于2018-05-08得票数 0
回答已采纳
我刚开始使用React查询，我有一个问题，我正在查看文档，但我无法找到如何访问已经从另一个组件中用useQuery()获取的数据。
我从const query = useQuery('todos', fetchFunction)中获取HomeComponent，并希望访问已经在TodosComponent中获取的数据。是否可以使用const query = useQuery('todos', fetchFunction)再次获取数据，或者是否有类似于redux的数据位于类似Store的地方，这样我就可以从任何地方访问它？
;)
浏览 1提问于2021-07-11得票数 10
回答已采纳
2回答
如何在React Hooks中使用静态变量？我有一个组件，我想把它传递给钩子，但由于static，我遇到了一个问题 旧Exemplo： class MyComponent extends Component {
static myComponentInstance
static show({...config}){
this.myComponentInstance.start(config)
}
start({...config}){ // my code function here }
} 新版本 const MyComponent = (props) =>
浏览 124提问于2019-09-24得票数 3
回答已采纳
3回答
我需要在一个更大的遗留应用程序中托管一个react应用程序，该应用程序有一些全局变量，在部署时我可以访问这些变量(在单独定义了带有全局变量的js文件之后，我引用了react应用程序的js文件)。
显然，我在构建一个试图引用未定义变量的应用程序时遇到错误(更不用说，如果不能访问它们，我就无法在本地进行开发)。解决这个问题的最佳解决方案是什么?我如何才能仅仅为了开发而注入这些全局变量(甚至是虚拟值)？
浏览 2提问于2017-08-22得票数 0
我想从父级react组件中的导入组件调用一个函数。
我的父组件：
import Customer from './Customer';
function App() {
return (
<div className="App">
<Container maxWidth="sm">
<Grid container spacing={2}>
<Grid item xs={6}>
<Button onCli
浏览 1提问于2019-12-11得票数 1
3回答
因此，我基本上只有一周的反应，多年来没有编写任何javascript代码。所以请原谅我的无知。
问题我创建了三个不同的组件类
const CreatedDate = React.createClass({
displayName: 'CreatedDate',
propTypes: {
name: 'CreateDate',
from: React.PropTypes.string,
to: React.PropTypes.string,
format: React.PropTypes.string,
onCha
浏览 1提问于2018-05-23得票数 3
回答已采纳
我才刚开始学习反应。如果我有一个带有两个变量的组件，那么在另一个组件中访问这些组件的最简单方法是什么？用道具，useState，useContext？如何在ComponentTwo中使用这两个变量。
import React from 'react';
ComponentOne = () => {
varOne = Mike;
varTwo = Tyson;
Return(
<div>
</div>
)}
export default ComponentOne
import React from 'react';
impo
浏览 6提问于2021-12-14得票数 2
回答已采纳
首先，让我说，对不起，如果这是一个简单的问题，我是新的反应和表达，无法找到答案。
我试图将数据传递给react对象，并根据passport.js返回路由呈现视图。
我有我需要传递的对象，我只是想不出如何传递它。
首先，用户进入auth路由。
router.get('/steam',
passport.authenticate('steam'),
(req, res) => {
//Not used
});
然后，在他们通过蒸汽登录后，他们返回到这条路线：
router.get('/steam/return',
浏览 2提问于2017-03-10得票数 3
回答已采纳
我已经将这些内容写到要搜索JSON文件的组件中。第一个组件包括两个部分1--它返回JSX表示元素和2元素--它通过JSON文件查找匹配项，并在Const中填充数据，并将其传递给为显示结果而创建的另一个组件的支柱。问题是组件的呈现()方法没有重新加载新输入的数据，而变量正常工作，数据从第一个组件传递到第二个组件，没有任何问题。
import react from 'react';
import React, { Component } from 'react';
import './index.css';
import ResultP from &
浏览 2提问于2022-01-12得票数 0
回答已采纳
我有这样的文件：
components/carousel.js
import hammerjs from 'hammerjs';
import React from 'react';
export default () => <div>...</div>;
components/layout.js
import React from 'react';
export default () => <div>...</div>;
components/index.js
export { d
浏览 2提问于2019-12-13得票数 0
我想用一个字符串作为输入呈现react组件，它是我从另一个页面动态接收的。BUt我将拥有react组件的引用。下面是示例
Page1:
-----------------------------
loadPage('<div><Header value=signin></Header></div>');
Page2:
--------------------------------
var React =require('react');
var Header = require('./header
浏览 1提问于2016-04-07得票数 14
我正在使用react-rails gem开发一个Rails应用程序。我希望在我的页眉中有一个react组件(即在应用程序的每个页面上显示的布局中)。我希望该组件有不同的孩子，这取决于我所在的页面。在React with Rails中有没有一种干净的方法来做到这一点呢？
本质上，我有一个标题，这取决于某些页面的应用程序的状态。更具体地说，我想在我的头中有一个购物车组件，当用户把东西放进去时，它会更新一个数字。但是用户可以这样做的组件只存在于商店页面上。因此，我基本上只想在加载这些页面时添加store组件，并将它们连接到购物车组件。但是我不确定如何将子组件添加到React中的另一个组件。
我是Re
浏览 2提问于2014-11-08得票数 0
当将方法拆分为单独的类文件时，如何从另一个文件中访问这些类？
例如，在included.js中，我有以下内容：
'use strict'
import React, { Component } from 'react';
import {
AsyncStorage,
} from 'react-native';
var myClass = React.createClass({
doStuff: function(){
return 'Hello';
},
render: fun
浏览 1提问于2016-09-27得票数 1
回答已采纳
我有一些React组件，我希望创建一个包文件，包括它们，并在另一个HTML文件中使用它。
我所做的:我创建了一个Webpack配置文件，它将index.js作为一个条目文件在/src文件夹中获取，并生成一个类似于components.js的包文件。
我导出了文件中的所有组件，并且我认为所有组件在与Webpack捆绑之后都是可以访问的。
我在Webpack中使用外键只从我的源生成包文件，而不是从外部lib生成包文件。
最后，我将function和bundle文件脚本放入HTML文件中，并希望将它们用作纯javascript函数。
<html>
<head>
浏览 0提问于2019-03-11得票数 0
回答已采纳
我对此的反应是全新的。我从github ()抓取了petclinic项目来运行它，并了解react是如何工作的。我想添加插件到这个项目(据我所知，插件是其他react项目)，我想添加的插件是一个数据表()，这是另一个react项目。我的问题是如何将一个react项目集成到另一个项目中。在jquery中，它是直接的，只是在项目中包含.js文件，但在react中，它似乎并不那么明显。
浏览 30提问于2018-01-22得票数 0
回答已采纳
CMS将一个变量作为data-rest-url属性传递给React.js应用程序：
<div id="reactjs-root" data-rest-url="http://my-ip-addess:8080/Rest-api-here">...</div>
如果我将jQuery添加到我的React.js应用程序中，那么我可以简单地：
componentWillMount() {
const $reactRoot = $('#reactjs-root');
const restUrl = $reactRo
浏览 24提问于2017-03-14得票数 10
回答已采纳
我试图从reactjs中的某个组件传递文本区域的值，以便在另一个react组件中使用。组件值存储在useState钩子中的第一个组件中，因此我希望在另一个组件中访问它，并围绕它运行map()函数。这在反应中是可能的吗？我不想把所有的东西都放在app.js中，因为这只是我不想要的简单的HTML。我想用reactjs函数组件代替？
第一个组件：
import React, { useState, useRef, useEffect } from "react";
function Firstcomp() {
const [quotes, setQuotes] = useSta
浏览 7提问于2022-10-18得票数 0
import React, { useState } from "react";
function HookCounter() {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Count {count}</button>
</div>
);
}
export default HookCounter;
每次需要重新渲染时，React
浏览 1提问于2019-11-08得票数 9
var React = require('react');
var SomeComponent = React.createClass({
componentWillMount: function() {
someVariable = "Variable";
return someVariable
},
render: function() {
return (
<div>{someVariable}</div>
);
}
});
module.
浏览 1提问于2015-06-12得票数 3
我正在使用Next.js和Next Link来处理我的React应用程序中的路由。
假设我有2页：/product-list?year=2020和一个将被路由到/product-list/details?year=2020&month=4的详细页面
在pages/product-list.js中，我使用React路由器获取year查询param来进行API调用。
const ProductList = (props) => {
const router = useRouter();
const year = router.query.year;
useEffect(
浏览 6提问于2021-04-17得票数 0
我必须从另一个功能组件调用一个功能组件，那么我如何在react js中从一个功能组件调用子功能组件。
import React from "react";
import TestFunctional from "./TestFucntional";
const TestListing = props => {
const { classes, theme } = props;
const handleClickTestOpen = () => {
return <TestFunctional />;
};
r
浏览 1提问于2019-07-17得票数 0
我很确定我只是100%错过了这一点，因为我是新的反应和Javascript，但是。
当我在main中调用另一个组件时，这两段代码中的props到底发生了什么？什么是table={table}我们不应该叫它道具吗？然后当我把props传递给我的其他组件时，为什么它被存储为const，并且它的点是props，它不是已经有这些值了吗？
import RecordsGetter from './RecordsGetter'
function MainController() {
const base = useBase();
console.log("The name
浏览 0提问于2020-08-25得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
