React Native :访问静态函数中的组件状态
React Native是一种用于构建跨平台移动应用的开发框架。它允许开发人员使用JavaScript编写应用程序，并将其转换为原生代码，以在iOS和Android等平台上运行。
在React Native中，组件状态是组件的内部数据，用于存储和管理组件的属性和状态。通常情况下，组件状态只能在组件内部访问和修改。但是，有时候我们可能需要在组件外部访问组件的状态，特别是在访问组件的静态函数中。
要在静态函数中访问组件状态，可以通过以下步骤实现：
- 在组件类中定义一个静态变量，用于存储组件的状态。例如，可以在组件类的顶部声明一个静态变量
static componentState = {}。 - 在组件的构造函数中，将组件的状态赋值给静态变量。可以使用
this.state来获取组件的状态，并将其赋值给静态变量。例如，可以在构造函数中添加ComponentName.componentState = this.state。 - 在静态函数中，通过访问组件类的静态变量来获取组件的状态。例如，可以使用
ComponentName.componentState来访问组件的状态。
需要注意的是，由于静态函数不会实例化组件对象，因此无法直接访问组件的实例属性和方法。但是，通过将组件的状态存储在静态变量中，可以在静态函数中间接地访问组件的状态。
React Native相关产品和产品介绍链接地址：
- 腾讯云移动开发平台：https://cloud.tencent.com/product/mpp
- 腾讯云移动应用托管：https://cloud.tencent.com/product/sa
- 腾讯云移动推送：https://cloud.tencent.com/product/tpns
- 腾讯云移动分析：https://cloud.tencent.com/product/ma
- 腾讯云移动测试：https://cloud.tencent.com/product/mt
相关·内容
我有一个问题，下面是我的代码： import React, { Component } from 'react';
import Meteor, {
withTracker,
} from 'react-native-meteor'
import { connect } from 'react-redux';
class CreateCommunityContainer extends React.Component{
static navigationOptions = {
title: 'Community
浏览 18提问于2019-02-12得票数 0
回答已采纳
我收到null不是一个对象(计算'this.state.search')我是新的反应-本机，所以不是100%确定发生了什么。谢谢你的帮助。
这是我的基本搜索栏：
use strict';
import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
import renderIf
浏览 0提问于2016-12-23得票数 2
我有一个React.Component，我想从许多不同的React.Component调用这个静态函数。
class Categories extends React.Component {
constructor(props) {
super(props);
this.getCheckedCategories = this.getCheckedCategories.bind(this);
this.state = {
checked: [],
unchecked: []
};
}
static getCheckedCate
浏览 0提问于2018-04-29得票数 1
回答已采纳
假设我有一个位于场景内部的comp (react-native-router-flux)。它让人们选择他们最喜欢的水果。
import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {MKCheckbox} from 'react-native-material-kit';
var styles = StyleSheet.create({});
export default class PickAFrui
浏览 0提问于2016-11-14得票数 0
我正在使用react native (安卓)中的StatusBar组件。以下是我的App.js组件中的示例代码：
import React, { Component } from 'react';
import { View, StatusBar } from 'react-native';
import { RootNavigator } from './components/Router';
export default class MainApp extends Component {
render() {
return (
浏览 0提问于2018-05-06得票数 1
我对React和React-native是相当陌生的，我正在努力理解如何更新return方法中的变量。
目前这是我的代码
import React, { Component } from "react";
import { View, StyleSheet, Platform, Text, Button } from "react-native";
export default class App extends Component<{}> {
constructor() {
super();
this.handleClick
浏览 0提问于2018-07-14得票数 3
回答已采纳
我想将一个值-3的状态传递给另一个使用值- 1的功能组件。我如何做到这一点？
我的代码：
屏幕1。
import { Text, TouchableOpacity } from "react-native";
import React from "react";
import { useNavigation } from "@react-navigation/native";
export default function ScreenOne() {
const navigation = useNavigation();
const
浏览 2提问于2022-03-04得票数 0
可能是一个简单的问题，有一个简单的答案，但我搞不懂。归咎于热度。我的模拟器打印‘这是一个测试’在屏幕上，当我希望它说‘改变’。我做错了什么？
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Template from './src/components/Template';
export default class App extends React.Component {
constructor(props)
浏览 1提问于2018-07-12得票数 1
回答已采纳
1回答
我4天前就开始学习反应母语了。我试图将一个属性this传递给另一个Scene，但是，一直遇到这个错误 _this.setState is not a function。我相信这不是一个重复，因为我已经阅读了这两个堆栈的答案和他们的解决方案似乎没有帮助我。我有一点不同的设置，虽然，所以认为，也许这可能是问题。
我知道React在这一年里发生了很大的变化，因为(并且经常这样做)这些问题得到了回答，所以我认为这也许就是为什么它们对我不起作用的原因。
import React, { Component } from 'react';
import { StyleSheet, Tex
浏览 1提问于2016-12-08得票数 1
回答已采纳
1回答
我的应用程序使用react-navigation DrawerNavigator组件，允许用户浏览应用程序中的各种屏幕。
我的react-native-maps MapView组件嵌套在通过DrawerNavigator访问的屏幕中。
我发现的问题是，如果您导航到应用程序中的另一个页面，然后导航回地图页面，则整个地图必须重新加载，以前的标记/地图配置将丢失。
是否有一种方法，可以防止屏幕卸载时，导航离开，或另一种方式阻止整个地图的重置？我不会在下面发布代码，因为我认为这个问题更多的是基于理论，而不是修复代码错误。
浏览 3提问于2018-02-11得票数 5
回答已采纳
我是一个新的react-native，我正在从服务器获取数据，并在数据的基础上更新我的UI元素，就像改变背景颜色或隐藏图像一样。为了实现这一点，我应该遵循什么方法，现在我正在尝试使用redux来实现，但不知何故无法更新redux中的特定项，因为在redux中我正在存储Json数据。我试着更新，但仍然没有运气来更新redux。
基本上，如果我从服务器自动获得任何数据，比如通知或其他数据，我想在每个屏幕上更新我的UI。
请帮助我决定更好的方法来实现这一点。
提前谢谢。
依赖关系：
"dependencies": {
"firebase": "^5.0
浏览 3提问于2019-05-14得票数 1
我一直在尝试将Redux实现到React-Native注册应用程序中，我正在开发它来创建一个多页表单设置。
我一直收到这个错误：
请在应用程序的根容器下面查看相关代码：
import React, { Component } from 'react';
import ReactNative from 'react-native';
import { AppRegistry,Text,View,} from 'react-native';
import { Button } from 'react-native-element
浏览 0提问于2017-09-18得票数 5
我有两个不同的文件：HomeScreen.js和ModalWidget.js。第二个文件包含模式对话框窗口的实现，我需要通过单击主屏幕上的按钮来调用这个小部件。此外，这种模式必须有能力关闭自己的按钮在它。我试图使用全局状态挂钩，但它给了我一条错误消息：Invariant Violation: Invalid Hook call。那么，我如何从主屏幕上调用这种模式呢？
ModalWidget.js
import React, { useState } from 'react';
import { Text, Button, Modal } from 'react-nati
浏览 3提问于2020-04-10得票数 0
回答已采纳
我已经创建了一个React，它提供了由react导航提供的导航，还集成了redux与redux导航-redux-helpers，并且我正在试图找到一种很好的方法来实现一个全球可用的'SignOutHeaderButton‘组件，当按下这个组件时，它将发送一个redux操作并执行一个导航操作。
目前，我必须从应用程序根组件中通过screenProps传递一个函数，该组件是分发redux操作的函数。然后通过UpdatesListView将该函数传递给screenProps容器组件，然后通过navigationOptions将其作为支柱传递到SignOutHeaderButton公共组件中。
浏览 0提问于2019-01-27得票数 1
回答已采纳
当我单击菜单到另一个场景时，有人能帮助我如何关闭sidemenu响应本地流量吗？
我试过了，但还是无法接近
这里是我的drawerlayout.js代码
import React, { Component } from 'react';
import Drawer from 'react-native-drawer';
import SideMenu from './SideMenu';
import {Actions, DefaultRenderer} from 'react-native-router-flux';
expo
浏览 4提问于2017-05-02得票数 0
回答已采纳
嗨，我正在做像TikTok这样的视频画廊应用程序使用React-Native与FlatList，而我做的应用程序，我得到了视频播放和暂停选项的错误。当我打开应用程序时，所有的视频都在后台一次播放，但我想播放屏幕上或视点中唯一可见的视频。所以一旦检查了下面的代码，给我任何更好的建议.. import SegmentedControlTab from 'react-native-segmented-control-tab';
import Video from 'react-native-video';
import VideoPlayer from 'r
浏览 73提问于2020-01-02得票数 1
4回答
请帮我找出以下React-Native代码中的错误之处？ 它说在构造函数(props)之后应该有';‘分号。我不知道我声明的方式是否正确。 import React from 'react';
import { StyleSheet, TextInput, View } from 'react-native';
export default function App() {
constructor (props){
this.state = {
text: 'HI'
}
}
render ()
浏览 19提问于2019-12-17得票数 1
3回答
它们希望从子组件中的组件中运行。这个方法调用: Pizza__WEBPACK_IMPORTED_MODULE_2_.default.valid :TypeError不是一个函数。
我尝试添加静态函数，但是它不会得到值。我可以在订单中添加比萨饼代码，但我不会这样做。
有人能帮忙吗？
我想从比萨获得dish_details，并在下面显示比萨表单。在.js中没有.tsx
Parend课程：
class Orders extends React.Component {
constructor(props) {
super(props);
this.order = {
name: &#
浏览 6提问于2021-06-02得票数 0
回答已采纳
2回答
调用另一个脚本的状态
、、、
大家好，我有运行在整个应用程序中的脚本App.js，我的页面用于响应导航(抽屉)，即Screen3.js
我想给我的州打电话。从App.js到Screen3。我的速度每10秒就会改变一次。
App.js
import Screen1 from './pages/Screen1';
import Screen2 from './pages/Screen2';
import Screen3 from './pages/Screen3';
import CustomSidebarMenu from './CustomSidebarMenu
浏览 2提问于2019-12-23得票数 0
1回答
我有两个组件，一个父函数组件和一个子类组件。我正在从父函数组件中的子类组件调用一个函数。下面是我尝试过的内容和我得到的错误信息。我想我错过了一些小的东西，但不知道它是什么会感谢任何帮助。
TypeError:未定义不是对象(计算'childRef.current.setModalOpen')
父功能部分：
import React, { useRef } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createSt
浏览 0提问于2021-03-24得票数 0
我想在React Native应用程序中显示MySQL数据库中的数据。 我能够在警报消息中显示数据。而不是在应用程序中(例如，在标签中)。 该怎么做呢？ 此屏幕截图显示了警报消息中的数据：alert message 非常感谢!
浏览 23提问于2021-04-24得票数 0
在componentDidMout()方法中，我开发了一段代码来查询互联网，但是如果这个查询没有成功完成(例如:超时)，用户将可以选择更新状态并重新查询componentDidMount()。问题是，在更新中，它只调用render()方法，而不调用其他方法。 /**
* Textures List
*
* This file is responsible for requesting the server's texture information (api)
* and printing on the screen.
* @author David Gaspar
*/
浏览 29提问于2019-06-18得票数 0
回答已采纳
我正在制作一个应用程序使用Reacti原住民。最困难的部分是处理javascript。我很少使用Xamarin.Forms开发应用程序。现在我被本地人的反应所吸引。
顺便说一下。
当我在console.log('I should be given B', B.getInstance())文件中调用App.js时。
我不明白为什么我得到A的实例而不是B的实例，即使我调用了B的静态方法。
谢谢。
Root.js
import App from './App'
import A from './A'
export default class Root
浏览 10提问于2017-12-24得票数 0
回答已采纳
我正在用react native开发一个移动应用程序。我有一个组件"Period“，它有几个状态，每个状态都被存储为TextInputs。此组件在平面列表中呈现多次。现在我想知道如何才能获得在Flatlist中呈现的每个"Period“实例的状态值？
任何解释如何在React Native中工作。我以为每个组件实例都有它的on状态？
非常感谢
浏览 1提问于2021-07-13得票数 0
我想在类组件中使用navigation，它不是屏幕组件，也不会通过props自动访问navigation，所以我必须将导航作为props传递给它。但是父组件是一个功能组件，我在其中使用了navigation挂钩。但是，如何在子组件中使用navigation？
ParentComponent.js
import React from 'react';
import {View , TouchableOpacity} from 'react-native';
import {useNavigation} from 'react-navigation-hook
浏览 2提问于2020-07-24得票数 0
回答已采纳
我试图在切换导航器中使用。
我不知道如何完成基本设置，因为自述文件中的示例与我的App.js不同。我用的是Reactive16.8，所以我应该能用钩子。
My App.js
import { useActionSheet } from '@expo/react-native-action-sheet'
const AuthStack = createStackNavigator(
{ Signup: SignupScreen, Login: LoginScreen }
);
const navigator = createBottomTabNavigator(
浏览 2提问于2019-10-15得票数 0
值得注意的参考：
我的目标是更好地理解React是如何重新渲染的，无论是在每次状态更新时还是在所有状态更新之后。
我目前的理解是React re-render on every state update，如果你有两个状态更新one outside of an async operation, and one inside，就会导致Can't perform a react state update on an unmounted component。如果您更新一个状态，然后在异步操作try, catch, finally中执行另一个状态更新，则会发生此错误。
使用Can't p
浏览 3提问于2020-09-20得票数 1
2回答
反应中的渲染-本机
、、、
我是相对较新的反应本土化，并在一般情况下，建立任何一个UI。我想知道什么时候在编写应用程序时使用render{}函数是合适的。我问这个问题是因为我想知道这个应用程序的效果。例如，如果我创建一个<LinkedIcon>组件并试图在一个屏幕上拥有大量的组件，那么每个点都应该调用render。否则我会怎么做。
示例代码：
import React, { Component } from "react";
import { Linking, View, TouchableHighlight } from "react-native";
浏览 0提问于2019-06-13得票数 0
回答已采纳
我尝试使用反应-本机-路由器-流量在导航栏上的右按钮。
我的代码是
import React from 'React';
import { TouchableHighlight } from 'react-native';
import { Scene, Router, Actions } from 'react-native-router-flux';
...
const filterIcon = () => (
<TouchableHighlight onPress={()=>} style={{...}}>
<
浏览 1提问于2016-08-19得票数 1
回答已采纳
我正在处理react本机，我有两个文件，首先运行geolocation函数来获取坐标并将其分配给状态。现在我想在我的第二个文件中访问这个状态。我试过使用props，但当我使用控制台日志时，它会显示未定义的内容。请帮帮我我是个新手。
export default class MapScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
mapInitialRegion: {
latitude: 10,
longitude: 7,
latitudeDelta:
浏览 0提问于2018-02-26得票数 1
我想在我的iOS应用状态栏中显示网络活动指示器。如何在react native中动态调用静态setNetworkActivityIndicatorVisible方法？
浏览 11提问于2017-01-21得票数 0
回答已采纳
我是个新手，当你开始一个新项目时，我发现样板和最近有点不同。现在它有了类似这样的东西：
import React from 'react';
function App() {
return (
<div>
<h1>Hello world!</h1>
</div>
);
}
export default App;
而不是像以前那样：
import React, { Component } from 'react';
class App extends Component {
浏览 3提问于2019-07-01得票数 1
2回答
我有一个React本机应用程序，其中有一个名为Helpers的类。这些是一组与应用程序相关的静态帮助函数。大多数情况下，我都像Helpers.functionName()一样称呼他们。从这种静态方法到达redux存储的最佳方法是什么？我想修改它并阅读它。
我有这样的帮手：
class Helpers extends Component {
static getState(){
return state;
}
}
我试图使用connect，但是在getState函数中，this.props是未定义的。
浏览 3提问于2017-07-04得票数 5
回答已采纳
3回答
我有一个屏幕，其中包含许多相同的CustomSlider组件。我想从每个滑块中检索滑块值。
在react本机中这样做的最佳实践是什么？
下面是一个最小的工作示例，有3个滑块：
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import MultiSlider from "@ptomasroos/react-native-multi-slider";
class CustomSlider extends Component
浏览 0提问于2019-03-10得票数 1
回答已采纳
React的新特性-原生的，正在努力更新当前视图。我有一个组件LanguageSelector，这是由应用程序组件加载。现在，当更改语言时，我希望将App组件字符串更新为新选择的语言。 一旦用户登录，语言选择器组件也会加载到header组件中，并且可以随时更改语言。我见过this explanation，但是通过监听每个组件上的语言变化来调用this.forceUpdate()似乎不太好，而且当组件嵌套时，情况会变得更糟。 我正在使用react-native-localization，我所做的一切就是(并且它是有效的)： import LocalizedStrings from 'r
浏览 20提问于2019-09-21得票数 0
1回答
我正在开发我的第一个小游戏应用程序。
我想要做的是将布尔型GreenF传递给绿色组件。(此组件是一个绿色按钮，用于检查greenFlash是否为真，然后更改按钮的颜色- works ok)。
但是greenF状态不会从false更改为true，那么Green组件也不会更改。我需要在play()函数中随时修改GreenF；
现在，每当我将greenF传递给时，它都是未定义的。我不确定我是否遗漏了什么，或者在理解React状态时遇到了问题。
这只是我的代码的开始，所以没有什么是完整的，只是为了你的理解。
import React, {Component} from 'react';
浏览 0提问于2020-01-17得票数 0
我是刚开始的react本机开发，我尝试在我的应用程序中添加一个登录/注册，我通过电子邮件和facebook登录很好(我在Firebase数据库中，所以没关系)。我想在用户登录后显示另一个视图。下面是我的firebaseconfig (在我的登录中导入)：
export async function loginUser(email, password) {
try {
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then(response => {
浏览 3提问于2020-02-17得票数 0
我正在尝试在我的应用程序中实现
源代码
import React, { Component } from "react";
import {
View,
ScrollView,
DatePickerIOS,
TouchableOpacity,
Text,
TextInput,
Button,
StyleSheet
} from "react-native";
import RBSheet from "react-native-raw-b
浏览 5提问于2019-12-08得票数 2
回答已采纳
我目前正在尝试在react原生应用程序中使用上下文。我的上下文代码如下： import React, { useState, createContext } from 'react'
export const AuthContext = createContext()
export const AuthProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState(null)
return (
<AuthContext.Provider value={{
浏览 14提问于2020-11-23得票数 0
回答已采纳
你好，我正在尝试制作一个步骤向导组件，但我有以下问题。我有以下文件：
import React from 'react';
import { View } from 'react-native';
import WizardStep from './WizardStep'
export default class Wizard extends React.Component {
constructor(props){
super(props);
this.state = {
questions: this.pr
浏览 5提问于2018-12-15得票数 0
回答已采纳
1回答
连接反应本机表达
、、
我刚开始做反应-本地人。我用的是世博会和快递。我正在试图连接前面和后面的一个GET请求。我得到了一个：
‘RootErrorBondary’：错误边界应该实现getDerivedStateFromError()。
在该方法中，返回状态更新以显示错误消息或fallbackUI。
谢谢!
这是我的App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import axios from 'react-native-axios';
浏览 3提问于2020-01-09得票数 0
我是第一次使用React Native。实际上，这是我的第一个应用。
我一直在尝试将数据从Fetch传递到组件，但没有成功。我研究了Google上上下下，左右为难，尝试了无数种方法，但仍然没有结果。
这是我的App.js
import React, {useState, useEffect} from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import Header from './parts/header';
// import BigNew
浏览 35提问于2020-02-18得票数 0
在尝试嵌入react-native-maps函数时，我得到了这个错误消息。
react-native-maps - TypeError: undefined is not an object (evaluating '_this.state.region')
我的代码
Home.js
import MapView from 'react-native-maps';
export default () => (
<MapView
style={{
position: 'absolute',
浏览 0提问于2018-12-24得票数 1
回答已采纳
2回答
我有从另一个类设置我的状态的函数，但是我得到了以下错误
超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中反复调用componentDidUpdate时，就会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
这是我的代码
constructor(props) {
super(props)
this.state = { loading: true, showAction: false }
setTimeout(() => {
StatusBar.setBackgroundColor(
浏览 1提问于2020-04-28得票数 4
回答已采纳
3回答
在使用类组件时，我不能使用导航，它告诉无效钩子。如何在类组件中使用导航？
这就是我试图在类组件中获得的导航选项。其实我是个新手，.Can，有人帮我吗？
import React, { Component } from 'react';
import { Text ,View ,TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';
class Mpin extends Component {
浏览 2提问于2022-06-07得票数 1
回答已采纳
我正在用react-native和react-native-paper构建移动应用程序。我在react-native-paper中使用了react-native-paper组件，如果我直接使用SnackBar组件，那么SnackBar组件中的onDismiss函数就能很好地工作。(这意味着snackbar将正确消失)
但是，如果我使用我的原始组件(如SnackBarComponent组件)，它使用了SnackBar组件(提供了react-native-paper )，那么剪贴栏就不会正确消失。
这是我的自定义SnackBar组件和调用原始SnackBar组件的代码。
我最初的SnackBa
浏览 0提问于2019-07-10得票数 2
回答已采纳
1回答
对于原生react，我仍然是个新手，并且正在尝试仅在状态设置为true的情况下才呈现视图。然而，尽管我一直在尝试，但我总是会出现以下错误：
Undefined is not an object (evaluating '_this.state')
代码：
"use strict"
import React, { Component } from 'react'
import * as Animatable from './animations'
import Icon from 'react-native-vector-i
浏览 0提问于2016-10-09得票数 0
1回答
我正在尝试向我的按钮中添加一个无状态组件。
const button = ({onButtonPress, buttonText}) => {
return (
<TouchableHighlight
onPress={() => onButtonPress()}>
<ButtonContent text={buttonText}/>
</TouchableHighlight>
)
};
得到这个错误：
Warning: Stateless function components cannot be given
浏览 2提问于2016-12-28得票数 1
回答已采纳
在App.js的react-native应用程序中，我使用react-native-router-flux并使用"RouterWithRedux“连接每个场景来存储redux，如下所示： export default class App extends Component {
render() {
const RouterWithRedux=connect()(Router);
return (
<Provider store={store}>
<RouterWithRedux>
<Sc
浏览 9提问于2019-04-28得票数 1
代码：
import React, { Component } from 'react'
import {
View,
Text,
TextInput
} from 'react-native'
export default class Home extends Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Home'
}
}
render () {
const [val
浏览 14提问于2019-11-21得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
