如何强制调用app组件中的函数
在React中，要强制调用app组件中的函数，可以通过以下步骤实现：
- 首先，在app组件中定义需要被调用的函数。例如，我们定义一个名为
handleClick的函数：
class App extends React.Component {
handleClick() {
// 处理点击事件的逻辑
}
render() {
return (
<div>
{/* 其他组件内容 */}
</div>
);
}
}- 接下来，在app组件的父组件或其他相关组件中，通过ref获取到app组件的实例。在构造函数中创建一个ref，并将其赋值给app组件的引用：
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.appRef = React.createRef();
}
render() {
return (
<div>
<App ref={this.appRef} />
{/* 其他组件内容 */}
</div>
);
}
}- 现在，你可以在父组件或其他相关组件的方法中，通过appRef引用调用app组件中的函数。例如，在父组件的某个方法中调用
handleClick函数：
someMethod() {
this.appRef.current.handleClick();
}通过以上步骤，你可以在React中强制调用app组件中的函数。请注意，这种方式需要在组件层级中传递ref引用，因此适用于父子组件之间的通信。如果组件层级较深或需要在非父子组件之间进行通信，可以考虑使用状态管理库（如Redux）或上下文（Context）来实现。
相关·内容
我有一个链接，在我的角度应用程序，是导致一个外部网址。当我单击该链接时，我正在使用角路由器并在控制台中接收此错误：
ERROR Error: Uncaught (in promise): Error: ASSERTION ERROR: Type passed in is not ComponentType, it does not have 'ɵcmp' property. Error: ASSERTION ERROR: Type passed in is not ComponentType, it does not have 'ɵcmp' property.
浏览 26提问于2022-09-28得票数 0
我对React有点陌生，通过所有新的编程努力，我正在构建一个todo应用程序。一切似乎都很正常，除了一个问题:当我在输入字段中输入一个待办事项并单击“提交”时，待办事项会被推入我的数组中，但是它不会立即显示出来。只有当我更改输入中的文本时，才会显示待办事项。我猜这与handleChange函数而不是handleSubmit函数上发生的呈现有关。任何帮助都将不胜感激。
下面是我的AddTodo组件
import React, { Component } from 'react';
import App from "./App"
import List from &
浏览 0提问于2017-02-16得票数 0
我在ReactJS上有一个关于Axios请求链接到componentDidMount函数的无限循环的问题。
在这里，事情：
第一:用户通过电子邮件接收链接(带有令牌参数)
第二:当他们点击链接，他们到达一个网页，他们可以重置他们的密码。我需要检查令牌是否总是可用的:根据这一点，呈现将是不同的。
为了检查令牌，我通过一个componentDidMount发出了一个POST请求。
最后，我得到了正确的呈现，但是我的请求是一次又一次的调用，在我的服务器上创建一个无限循环。似乎我的子组件正在一次又一次地重新构造。
这是我的密码：
儿童部分：
import React from '
浏览 0提问于2018-07-31得票数 0
回答已采纳
1回答
在应用程序中进行路由器更改后，我的角路由器无法加载最新的组件。如果我手动调用URL，它将加载正确的内容，但是，对routerLink的任何使用或对router.navigate的调用都不会影响路由器出口内容。
我尝试过绑定到路由器事件，并在发生更改时召回getContent函数，这解决了以编程方式调用时的问题。
这个项目很简单，但是路由器：
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Cont
浏览 3提问于2022-08-05得票数 0
1回答
为了模块化，我的Redux应用程序被分解成单独的组件，app域是一种共享的基础设施组件，它处理诸如加载指示符之类的常见ui更改。
app/ <- Global app
---app_reducer.js
---constants.js
---actions.js
---...(react components)
users/
---users_reducer.js
---constansts.js
---actions.js
---...(react components)
products/
---products_reducer.js
---constants.js
--
浏览 3提问于2016-06-01得票数 3
回答已采纳
我刚刚开始学习反应，并想了解道具和状态行为的不同。我有两个文件App.js和Counter.js。
App.js：
import Counter from './Counter'
function App() {
return (
<Counter initialCount={2} />
)
}
export default App;
和Counter.js：
import React, { Component } from 'react'
export default class Counter extends Compone
浏览 7提问于2021-12-25得票数 0
回答已采纳
2回答
我有一个react应用程序，它从后端获取待办事项列表，将它们显示在列表中，并为您提供一个按钮来添加新的待办事项。
我注意到新添加的待办事项只有在我刷新页面后才会出现在列表中(例如，在它从后端获取后)。我想强制组件使用新添加的to do重新呈现，理想情况下不需要后端调用。我该怎么做呢？
组件-文本留在框中，不出现在列表中
我点击添加并刷新页面后的页面-显示在下面-我希望这个行为发生在没有手动刷新的情况下
App.tsx
import React, {useState, useEffect} from "react"
import './App.css&
浏览 2提问于2020-07-03得票数 0
我正在尝试理解我这里拥有的Label函数的函数体何时运行。
export default function App() {
const label = <Label>Foo</Label>;
return <Button>{label}</Button>;
}
const Button = (props) => {
const shouldRenderChildren = false;
return <button>{shouldRenderChildren && props.childre
浏览 2提问于2022-06-05得票数 2
回答已采纳
5回答
我是新接触redux框架的。下面的代码中的App是什么意思。是否将Type，Class传递给连接函数？我想知道它是如何工作的。显然，connect函数返回一个新的模块用于导出。有没有人可以通过基本的javascript例子来理解这段代码。
export default connect(mapDispatchToProps)(App);
浏览 0提问于2019-08-26得票数 3
如何正确地编写React组件作为React 的函数
当我试图将组件编写为函数时：
"use strict"
function App() {
const [foo, setFoo] = React.useState()
const element = React.createElement()
return element
}
function appRender() {
const appContainerElement = document.getElementById('app-container')
cons
浏览 4提问于2021-07-14得票数 0
回答已采纳
当我在我的应用程序上使用钩子时，我得到了的错误:无效的钩子调用。我不知道为什么要得到这个错误，因为我认为它是在函数组件中调用的？
Server Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as R
浏览 3提问于2021-01-17得票数 2
回答已采纳
我在使用@react-navigation/bottom-tabs的React中有以下堆栈导航程序代码
const Tab = createBottomTabNavigator();
const TabNavigator = () => (
<Tab.Navigator tabBar={(props) => <BottomNavBar {...props} />}>
<Tab.Screen name={routes.app.search} component={Search} />
<Tab.Screen name={
浏览 3提问于2022-02-16得票数 1
回答已采纳
当我进行更改(post、delete等)时，我不明白为什么表中的数据没有更新。到SQL数据库。我必须每次刷新浏览器才能看到表中的更新。这是一个简单的列表，在提交包含更改的表单时会进行更新。在onSubmit函数结束时，它会路由回fleet home，但该表显示的是旧数据(直到浏览器刷新)。没有错误。我觉得我在这里错过了一个重要的Angular步骤(仍然是Angular的新手)。 我试着添加"...this.ngZone.run(...)..“到路由器导航，但它不会刷新数据。我读到"...this.route.paramMap.subscribe(...)“我可以监听数据更改，
浏览 3提问于2019-10-11得票数 0
我有一个无限的滚动器，每次调用一个组件<Goat /> 5，给它一个随机属性，比如名称和图像。滚动向底部和另一个5被加载。当新5显示时，我能够防止现有组件重新呈现：
shouldComponentUpdate(nextProps){
return false;
}
这很好，但是如果我要向列表中的每个元素传递一个唯一的键，它将再次在页面上重新呈现所有现有的<Goat />组件。
我能在传递钥匙的时候防止这种情况发生吗？
App.js：
import React from "react";
import Goat from "./compon
浏览 3提问于2019-11-30得票数 1
2回答
我正在使用一个小应用程序，在那里我使用react.js。因为我是初学者，所以我对它有一些问题。
我想映射我的数组，但它不能工作。我学习了youtube教程，区别是数组中填充了硬编码的数据。当提取完成后，我将获取数据并将其添加到数组中。(JSON对象)。
import React from "react";
import Product from "./Product"
export default class ProductList extends React.Component{
render()
{ console.log("productlist
浏览 1提问于2017-11-01得票数 2
回答已采纳
1回答
我真的不知道如何做到这一点，我有一个login.tsx文件和App.tsx文件：
在login.tsx中，我有：
const Login = () => {
const classes = useStyles();
const [state, dispatch] = useReducer(reducer, initialState);
[...]
const handleLogin = () => {
if (state.password === 'password' && state.username.length > 2
浏览 6提问于2021-07-02得票数 0
回答已采纳
1回答
import React from 'react';
const App = () => {
console.log('app render');
return (
<div>
<Children />
</div>
);
};
const Children = () => {
const [update, setUpdate] = React.useState(false);
console.log('children render');
浏览 3提问于2022-06-05得票数 0
我是一个对Angular2和TypeScript..well完全陌生的网页开发人员，一般对应用程序都是新手。
我正在尝试设置一个共享类，我的各个对象都可以从中获取用户数据，比如SessionID。我的问题是，我不知道如何获得一个可以执行HTTP请求的构造函数。
我使用的是Ionic2，所以Angular2和类型记录都在Visual中。我从离子构建模板开始，我不会在Visual中出现错误，但是在运行“离子服务--地址192.168.1.128”之后，会得到下面的错误
未明错误: CurrentUser at DirectiveResolver.resolve () at CompileMeta
浏览 2提问于2016-11-08得票数 0
回答已采纳
如何将ChildComponent中的hello值传递给App组件，并在页面加载时将其存储在ChildComponent的childProps变量中。
import React, { Component } from 'react';
class App extends Component {
render() {
var childProps ''; // I want store the passed const value in this variable;
return (
<div>
<Ch
浏览 8提问于2022-01-28得票数 1
1回答
您好，我在这个组件中有以下代码，
<app-steps #appSteps
[menuSteps]="steps"
[currentComponent]="outlet?.component"
(currentStepChange)="currentStep = $event">
<div appStepBody>
<router-outlet></router-outlet>
<app-deploy *ng
浏览 0提问于2020-06-18得票数 0
我有一个服务器端呈现音频播放器反应应用程序。
使用，我有一个持久的AudioPlayer组件，在这个组件中，每当mobx存储中的@observable playerData = {}发生变化时，我都要调用一个this.play(mp3url)函数。
我已经成功地点击了我的应用程序中的其他组件，随时更新playerData。
但是我无法在我的AudioPlayer组件中检测到这些更新，所以我可以设置它的状态并调用this.play(mp3url)来开始播放音频。
页面/_app.js
import initializeStore from '../stores/stores';
浏览 1提问于2019-10-05得票数 1
回答已采纳
在我的整个代码中只有一个this.setState调用，这在构造函数中，但是我得到了setState错误。
为了清晰起见，我将其简化为以下代码：
import React, { Component } from 'react';
class App extends Component {
constructor() {
super();
this.setState({
hello: 'nothing'
});
}
render() {
return (
<div></di
浏览 3提问于2017-06-18得票数 1
回答已采纳
1回答
所以我现在的代码如下所示，我正在尝试用来自消防局数据库的信息实时更新一个资料ui表。我能够从数据库中读取信息并将其插入数组中，但是当我将表数据设置为等于数组时，它不会改变任何事情。我已经读到我应该使用状态来做这件事，但是我对响应/JS还很陌生，并且不太确定如何在我目前的情况下实现这一点。任何帮助或指示都将不胜感激！
编辑的
我实现了来自@Mateen的响应，但是代码编译成功，但是在应用程序本身上，会弹出以下错误。
Error: Invalid hook call. Hooks can only be called inside of the body of a function compone
浏览 2提问于2020-07-12得票数 0
1回答
假设我有一个名为Vault的组件
class Vault Component{
State : { animal: dog,color:blue}
}
让我说我在组件中有一个按钮，名为App
class App Component{
State: { animal:null,color:null}
}
<div onCLick = {goGetVaultData()} className="button">Press Me</div>
问题是goGetVaultData函数如何从不同的组件中提取状态？
goGetVaultData(
浏览 2提问于2019-10-03得票数 0
回答已采纳
我们知道，如果我们想重新呈现一个由related连接的，那么在发送相关的操作时，我们应该在reducer中返回一个新的数组。我的问题是，为什么redux组件在redux还原器不返回新数组时可以重新呈现？当我点击按钮时，第一个应用程序名变成'aaa'，为什么？
行动：
export function setAppName(name: string) {
return {
type: 'SET_APP_NAME',
name,
}
}
减速器：
export function appInfos(state = {
appInfos: [
浏览 2提问于2021-07-26得票数 0
回答已采纳
我有下面的代码，我的目标是在2秒后在按钮上更新text的值。当控制台日志花费2秒时间打印时，text值正在立即更新。如何让它等待2秒来更新text值？
function App() {
const [text, setText] = React.useState('Initial state');
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Changed state'
浏览 10提问于2022-07-22得票数 0
回答已采纳
我试图实现一个过滤器，一旦用户提交了过滤器表单，我就把表单的内容传递给查询参数，解析器根据过滤条件调用一个服务来获取新的内容。
这就是我如何设置我的路由(ReferralsPage是一个延迟加载的组件)
//app-routing.module.ts
{
path: 'home',
resolve: {
loggedIn: AuthenticationResolver
},
children: [
{ path: '', redirectTo:
浏览 0提问于2019-03-22得票数 0
2回答
我有(例如)反应中有两种成分。第一个App.js是父组件。它将一些值传递给子组件Child.js。在child.js,中，它通过props接收值，并使用axios调用结果更新一些state变量。这个很好用。
现在，我需要在App.js中获得更新结果值。如何在App.js中获得该值
App.js
this.state ({ ...
examResult: null // need to update this with the child component result.
})
<ChildComponent
Id={this.state.StudentId}
浏览 1提问于2019-03-12得票数 0
回答已采纳
我想我的react路由器出了点问题。如何防止react路由器重新呈现以前呈现的页面？
我有这样的路由器代码：
class App extends React.Component {
render() {
return (
<div>
<NavBar/>
{this.props.children}
</div>
);
}
}
ReactDOM.render(
(
<Router history={hashHistory}&
浏览 13提问于2017-02-14得票数 7
2回答
我想知道我是否可以在react中做到这一点，我想从JS文件中调用react组件的函数或方法，这样我就可以更改该组件的状态。
例如，我有以下三个文件
第一个App.js
import React,{Component} from 'react';
import Login from './Login';
class App extends Component{
constructor(){
super();
this.state = {session:false}
}
changeStateSession
浏览 3提问于2018-03-07得票数 1
3回答
下面是通过url从axios获取数据的代码片段，
import React, { useState, setEffect, useEffect } from 'react';
import axios from "axios";
import LoadingPage from "./LoadingPage";
import Posts from "./Posts";
const url = "https://api-post*****";
function App() {
const [posts, s
浏览 7提问于2022-05-24得票数 0
2回答
我想使用一个返回对象数组的函数，并将其用作vuetify select的项。 我也像这样使用它： <v-select
:items='functionToCall()'
......
> 我在函数之后控制台记录const，我有我想要的输出，但在我的select菜单中什么也没有。
浏览 39提问于2019-12-12得票数 1
function App() {
const [currentPanel, setCurrentPanel] = useState(ProfilePanel); // ProfilePanel is a component
return (
<div className={styles.App}>
{currentPanel}
</div>
);
}
在代码中，我将组件"ProfilePanel“设置为"curentPanlel”状态，然后
浏览 4提问于2022-02-01得票数 1
1回答
我试图构建一个应用程序来帮助我学习反应。这是一个简单的应用程序，它将用户输入位置，从googles地理定位api中获取坐标，然后使用黑暗的skys api获取该位置的天气条件。
最初，我的所有应用程序逻辑都在一个容器中，您可以在这里看到
我想把我的逻辑分开一点，因为我觉得我的一个容器做了太多的事情。我希望我的应用程序结构如下。
App.js -持有状态，locationChangeHandler函数传递给LocationSearchContainer。
LocationSearchContainer -地理定位API并调用LocationSearch来显示搜索栏。
WeatherContain
浏览 1提问于2018-09-15得票数 0
回答已采纳
在过去的2-3天里，我一直在为这个问题绞尽脑汁。我正在尝试显示一个新用户的displayName集，并在其帐户页面加载时存储在Firebase身份验证数据库中。我似乎无法在第一批货物上看到它。我尝试了在setState组件本身中使用UserAccount方法，但这会导致同样的问题。页面需要手动刷新才能更改用户名状态，而p元素则需要在屏幕上显示displayName。请帮我解决这个问题。下面是UserAccount组件的代码。如果您需要其他部件的代码，请告诉我。
class UserAccount extends React.Component {
constructor(props)
浏览 1提问于2020-04-19得票数 0
回答已采纳
我有一个React应用程序，它在两个组件中生成几个API请求。我试图修改我的代码，使这些组件不是在componentDidMount()上提出新的请求，而是使用在props中可用的数据。我把它用于一个组件，而不是另一个组件--据我所见，处理这些组件的人没有什么不同，所以我认为我的方法肯定是错误的。
使API调用的函数在下面的app.js中。调用的结果被保存到状态(wantedCards或ownedCards，取决于API调用)，然后作为prop传递给组件，在React路由器(BrowserRouter)中。
class App extends Component {
state = {
浏览 3提问于2020-10-12得票数 0
回答已采纳
好吧，朋友们，情况非常复杂：
我有一个air应用程序，在它里面我有一个运行flex web应用程序的HTML组件，我需要在两分钟内将焦点放在文本输入上。HTML组件在Panel中，而这在stackview中
1.-当我选择HTML组件所在的stackview索引时，Panel会调度complete事件。好的，我通过修改flex web应用程序的html包装器来解决这个问题，添加一些代码，比如
<script languaje="javascript" type="text/javascript">
function setInitialFoc
浏览 0提问于2013-04-18得票数 0
2回答
我正在尝试测试子组件，但是它需要一个父组件来实现它的主要功能。
如何使用“模拟”父级测试子组件？
(使用Jest，角14，TypeScript)
parent.component.ts
@Component({...})
export class ParentComponent {
onChildClicked(child: ChildComponent) {
// ...
}
}
child.component.ts
@Component({...})
export class ChildComponent {
constructor(private pa
浏览 14提问于2022-08-26得票数 2
我有一个addNotification() at App.js的方法，我想在其他组件中重用它。例如，这里我使用了AgencyProfile组件。如果我将addNotification()方法从App.js导出，则不起作用。如何从其他子组件调用方法addNotification()，例如AgencyProfile？这是我的App.js代码
export class App extends React.Component{
.....
addNotification(title, message, level, time) {
let dismiss = (ti
浏览 2提问于2019-09-20得票数 1
回答已采纳
在Items组件中，我在本地存储中设置toke。Details组件尝试访问此令牌。它得到了null
class Items extends Component {
constructor (props) {
super(props);
}
getT = () => {
axios({
method: 'post',
url: '/oauth2/token',
data,
config
})
.then(res => {
i
浏览 0提问于2019-07-25得票数 0
回答已采纳
1回答
我正在为我的一个反应项目建立一个登录和注销系统。我有一个导航栏设置，我正在使用react-redirect-dom创建链接和重定向到不同的页面，以管理登录系统。
在当前项目中，我有一个在登录组件中对登录进行处理的路由。我有另一个链接，处理注册组件内的注册。
对于注销，如果用户登录并使用/logout端点，我希望它立即调用handleLogout函数，并将用户注销并重新路由到/端点。
下面是我的代码和错误：
function App() {
const [loggedIn, setLoggedIn] = useState(false)
const [currentUser, setCu
浏览 7提问于2022-01-15得票数 1
回答已采纳
我非常喜欢Angular，我想知道如何将参数传递给注入到组件中的对象构造器。 下面是一个示例： image-capture.service.ts @Injectable({ providedIn: 'root'})
export class ImageCapture {
constructor(
private sdk: any,
private videoSource: HTMLVideoElement,
private cameraFeedback: HTMLCanvasElement) {}
} image-scanner.componen
浏览 51提问于2021-02-09得票数 0
目前，试图通过开发一个从openFEC API获取数据的简单应用程序来学习反应。
我目前在我的应用程序中定义了两个组件，一个是SearchBar，另一个是候选组件。这就是我的App.js当前的样子：
class App extends Component {
constructor(props){
super(props);
this.state = { candidate: [], searchTerm: '' }
}
render() {
return (
<div className
浏览 2提问于2018-01-23得票数 1
5回答
我刚开始对JS做出反应，我想创建一个ToDo列表应用程序。我有App.js，它是主页面，所以我为App.js页面创建了MainBlock组件，该组件包含布局的左右两面，在右侧属性中加载具有input和button的Form组件，并将输入值保存到state中的数组中；在左侧，它加载List组件，该组件具有一个名为allTasks的属性，用于打印所有任务。我的问题是如何将allTasks状态从表单组件传递到App.js，从而将其传递给List组件属性？在App.js中：
<MainBlock
left={
<List allTasks={['خرید از فروش
浏览 3提问于2018-02-24得票数 0
回答已采纳
2回答
我有两个名为app.js和mod-form.js的文件。当我单击App.js组件上的按钮时，我希望触发mod-form.js文件中的一个函数。我刚进入反应库，如果你能帮我的话，我会很感激的。我希望我能解释。
示例模式-form.js
const [open, setOpen] = React.useState(false);
const handleOpen = () => {
setOpen(true);
};
示例App.js
<ModalForm ref={(ref) => this.handleOpen = ref} />
就像这样。
浏览 0提问于2021-04-26得票数 0
1回答
我正在尝试从加载页面调用app组件中的方法，比如主页。为此，在我的home组件中，我使用：
@Output() onPopMessage = new EventEmitter<Event>();
footerLinkHandler(link){
this.onPopMessage.emit(link);
return false;
}
现在我需要调用app组件。由于主页位于router-outlet中，因此我尝试这样做：
<div class="wrapper" (onPopMessage) = "on
浏览 1提问于2018-05-10得票数 0
1回答
我想要建立一个应用程序，将有几个单体。我的问题(类似于这一个)是，如何在这些应用程序之间集中User模型，即如何处理用户管理/授权/身份验证而不重复代码。对于某些上下文，我使用的是Django的代码驱动开发。
这就是我想出来的：
=========== ======================= ===============
== App 1 == <---> = Shared API with DRF = <---> ==== App 2 ====
=========== =======================
浏览 0提问于2019-02-25得票数 1
回答已采纳
2回答
我有一个任务需要我创建一个按钮来删除数组中的某些项目。我已经将一个数组作为支柱传递给子组件()。现在，在子组件中，每当我单击delete按钮时，它似乎就不起作用了，而且我很难找到问题。
下面是代码的链接：(App.js)
function App() {
const [input, setInput] = useState("");
const [list, setList] = useState([]);
const handleSubmit = (e) => {
e.preventDefault();
setList([...
浏览 4提问于2022-07-11得票数 0
我有一个问题，背如何工作在样式-组件。
假设我使用他们的ThemeProvider定义并传递一个主题
const theme = {
primary: '#df0000',
}
ReactDOM.render(
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
,
document.getElementById('root')
)
我可以定义一个在App.js中访问App.js的“样式Div”，如下所示：
const App = prop
浏览 1提问于2019-07-28得票数 3
我使用与Firebase应用程序交互；我希望使用fetch方法获取一段数据。文档中的示例只使用console.log，不返回值，因此我不知道如何访问正在获取的数据。
例如，我试图为fetch的结果设置一个变量，然后在无状态函数组件的render方法中使用该变量：
// app/components/CompanyCard/index.js
let subtitle = helpers.getCompanyName(props.company);
return (
<div className="Card">
<div className=
浏览 0提问于2016-04-01得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
