如何在reactjs中访问另一个组件的函数？
在React.js中，要访问另一个组件的函数，可以通过以下几种方式实现：
- 使用Props（属性）：将函数作为属性传递给子组件，子组件可以通过props来访问并调用该函数。例如：
// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends React.Component {
handleClick() {
console.log('Parent component function called');
}
render() {
return (
<div>
<ChildComponent handleClick={this.handleClick} />
</div>
);
}
}
// 子组件
import React from 'react';
class ChildComponent extends React.Component {
render() {
return (
<div>
<button onClick={this.props.handleClick}>Call Parent Function</button>
</div>
);
}
}- 使用Refs（引用）：通过创建一个ref引用，可以在父组件中访问子组件的函数。例如：
// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends React.Component {
handleClick() {
console.log('Child component function called');
}
render() {
return (
<div>
<ChildComponent ref={(child) => { this.childComponent = child; }} />
<button onClick={() => { this.childComponent.handleClick(); }}>Call Child Function</button>
</div>
);
}
}
// 子组件
import React from 'react';
class ChildComponent extends React.Component {
handleClick() {
console.log('Child component function called');
}
render() {
return (
<div>
Child Component
</div>
);
}
}- 使用Context（上下文）：通过创建一个上下文对象，可以在父组件中共享函数，并在子组件中访问和调用该函数。这种方法适用于需要在多个层级的组件中访问函数的情况。例如：
// 创建一个上下文对象
const MyContext = React.createContext();
// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends React.Component {
handleClick() {
console.log('Shared function called');
}
render() {
return (
<MyContext.Provider value={this.handleClick}>
<ChildComponent />
</MyContext.Provider>
);
}
}
// 子组件
import React from 'react';
import MyContext from './MyContext';
class ChildComponent extends React.Component {
render() {
return (
<div>
<MyContext.Consumer>
{(handleClick) => (
<button onClick={handleClick}>Call Shared Function</button>
)}
</MyContext.Consumer>
</div>
);
}
}这些方法可以根据具体的场景和需求选择使用。在React.js中，通过Props、Refs和Context可以实现组件之间的函数访问和调用。
相关·内容
我的问题是在子组件中，我有一个通过post方法更新的状态，我必须在我的父组件中显示这个状态--这两个组件都是类基组件。
浏览 8提问于2020-10-08得票数 0
回答已采纳
4回答
我有两个组件：App和Contact。我只想在我正在传递的联系人页面上打印id，但是当我在contact组件中console.log(this.props)时，它显示的是一个空对象。
import React from "react";
import Contact from "./Contact";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
class App extends React.Component {
render() {
浏览 0提问于2019-10-15得票数 2
回答已采纳
我有一个主要的App组件，其中包括.
changeAmount(a) {
console.log('changing: ', a);
}
<Table
data={result}
onClick={() => this.changeAmount()}
/>
然后，<Table>组件有一个<TableRow>组件，其中包含两个按钮。是否有一种方法可以传递多个onClick方法，以便我可以使用一个用于decrease，另一个用于increase？
export default class TableRow ext
浏览 1提问于2017-08-14得票数 3
回答已采纳
我的根组件是App.js。它有许多子组件。但是我在子组件中声明了函数，并且我需要在react js中的同等级别组件中访问这些函数。在此处输入图像描述
这是组件层次结构。我需要将函数从自定义播放器传递到播放按钮组件1：
浏览 1提问于2021-12-02得票数 0
我创建了一个下拉菜单，并试图将它传递给另一个组件：
var DropDownButton = React.createClass({
getInitialState: function() {
return {
stage: 'Select'
}
},
change: function(e){
this.setState({
stage: e.target.value
});
},
render: function() {
浏览 5提问于2016-12-19得票数 0
回答已采纳
1回答
您好，我正在尝试调用我的输入值的形式到我的fetch函数，但它无法读取它，请帮助我…我打算做一个fetch post，这样我就可以把它插入到我的表中……
我的函数类似于
handleSubmit() {
debugger
function createNewProfile(profile) {
const formData = new FormData();
formData.append('Employee_Name', profile.Employee_Name);
formData.append('Address', pro
浏览 0提问于2017-05-18得票数 0
我有一个父组件和一个子组件，如下所示。
父组件：
constructor(){
this.refs = React.createRef();
}
setRef(ref) {
console.log(ref)
}
handleChange(e) {
console.log(e)
}
render() {
return(
<ChildComponent ref={this.setRef} handleChange={this.handleChange.bind(this)}/>
)
}
子组件：
render() {
浏览 2提问于2019-05-09得票数 4
回答已采纳
2回答
我想在ReactJS中从一个页面导航到另一个页面我正在使用history.push，但它给出了一个错误，即TypeError: Cannot read properties of undefined (reading 'push') at Login.jsx:65 at async loginHandel (Login.jsx:51)
这是我的App.js代码
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Login from &#
浏览 2提问于2021-09-22得票数 1
我还没反应过来。
我想知道，如何将数据从“主页”传输到另一个页面以显示结果？
我想这和道具有关吧？但我不完全确定。
我的MainPage有输入/选择标签，包含名称、值、用户的选择和日期。
我希望能够获取所有这些信息，并将其输出到另一个名为"DisplayResults“的页面中，并可能将这些数据用于其他方面，或者创建一个包含这些信息的表。
非常感谢你的帮助！
，这是我的app.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router,
浏览 4提问于2017-01-31得票数 10
回答已采纳
在我的应用程序中，我有一个React组件，它呈现一个数字列表，它还通过sessionStorage存储这些数字的和。
我的应用程序还有一个带有<input />的组件，这样就可以添加新的数字。这还会导致更新sessionStorage存储的值。对于每个数字，存在一个button以允许删除数字，这将立即更新存储在sessionStorage中的值。
问题是，我有另一个组件，它使用react将存储在sessionStorage中的值作为状态使用，但是当我在sessionStorage中更新值时，状态的值不会改变。
我正在尝试使用useEffect()更新它，但它不起作用：
import
浏览 0提问于2019-04-22得票数 2
回答已采纳
嗨，我是reactjs的新手。我想将组件导出到另一个组件中。我想将这个name_of_the_component从助手组件导出到。
下面是代码片段
class Helper extends React.Component {
render = () => {
return ReactDOM.createPortal(
............
);
};
}
export function error(Component) {
return (
......
浏览 0提问于2018-09-25得票数 0
回答已采纳
2回答
在这里，状态(MenuAction)在Context.js文件中定义。现在，我想切换类onClick(id="nav-icon1")，因此需要在Navbar.js中访问该状态。
它会产生错误
TypeError:无法读取未定义的属性“状态”
任何帮助或建议都很感激。
Context.js
import React, { Component } from 'react'
import { LinkData } from './LinkData'
const DataContext = React.createContext();
浏览 5提问于2020-01-21得票数 0
回答已采纳
2回答
我正在开发一个在reactjs中的webapp，它使用了visual studio 2017中的类型库，这对我来说是非常新的技术。我被困在一个问题上，我不知道如何从另一个组件重新呈现一个组件。
我有一个登录页。我想要做的是在用户登录时在我的头组件中显示用户名。唯一的问题是，标题组件对我所有的网页都很常见。以下是我的layout.tsx文件：-
export interface LayoutProps {
children?: React.ReactNode;
}
export class Layout extends React.Component<LayoutProps, {}>
浏览 0提问于2018-05-30得票数 1
回答已采纳
假设我有一个带有路径app -> taskbar -> button -> modal -> textfield的应用程序。我希望textfield能够设置用户输入，并在应用程序的其他地方使用，例如，app -> differentButton -> differentModal会显示这个用户设置。
我是全新的反应，但似乎数据只能向下通过道具，对吗？是否期望我将此状态外部存储在db中？我不介意这样做，但似乎应该有一个简单的方法来做到这一点，而我却忽略了这一点？
浏览 0提问于2015-12-22得票数 1
回答已采纳
我已经创建了父组件和子组件(Piechart.js)。我将道具从父组件传递到分段组件，如这个->。
<Pie batdata={this.props.BattingRecord}/>
以上代码位于父组件中。现在，我想从我的分段组件(这是子组件)中的道具中提取数据。
当我在计件组件构造函数中尝试console.log(this.props)时，它在控制台中显示JSON数据。见下面的截图：
现在，我想在how中获取dismissal参数，参见上面的截图。我想我没有正确地使用道具。因此，我在分段组件中所做的尝试如下：
Piechart.jsx：
import Rea
浏览 0提问于2018-06-18得票数 0
回答已采纳
我有一个"MessageDisplay“类，我想从外部调用它的函数sendMassageToServer。我已经构建了一个辅助函数来从另一个文件中调用。但是如何导出类中的函数呢？
这些数据只是一些例子。
main.js
export function sendSpeechToServer(query){
MessageDisplay.sendMessageToServer(query);
}
class MessageDisplay extends React.Component {
constructor(props) {
super(props);
浏览 0提问于2018-09-10得票数 0
1回答
我试图导出一个变量，并对另一个文件作出反应。
我有一个数组，我想在多个文件中使用它。在一个文件中，当按下按钮时，应该将其清空。
myArray.js
export var myArray = [];
app.js
import {myArray} from './myArray.js';
function resetArray(){
myArray = [];
}
Webpack犯了以下错误：
./app.js模块构建失败: SyntaxError："myArray“是只读的
怎样才能使它不是只读的，而是可调节的？
谢谢!
浏览 1提问于2018-08-15得票数 0
回答已采纳
我的场景是:我有一个项目列表，每个项目呈现一个组件。每次单击其中一个项时，我都会呈现另一个组件(非常类似于模式)，将当前项作为道具传递。在模态组件中有on按钮，当单击该按钮时，应该会在创建它的组件上触发一个函数。
我的物品是：
const items = [
{
id: 1,
data: "some data"
}, {
id: 2,
data: "some data"
}, {
id: 3,
data: "some data"
浏览 0提问于2021-02-23得票数 1
回答已采纳
跟随ReactJS教程从他们的网站。
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
})
浏览 3提问于2015-11-26得票数 0
回答已采纳
例如，我有一个这样的组件，
import React from "react";
export default const App = () => {
console.log("ComponrntName i.e App in this scenario")
return (
<div>
<p>Hello World</p>
</div>
)
}
如何获取组件名称。(即)本场景中的App。谢谢
浏览 1提问于2020-04-30得票数 0
我有以下的ReactJ类：
var Linker = React.createClass({
foo: function(){
console.log('foo')
},
render: function(){
return (
<div></div>
);
}
});
现在，我想从外部调用foo()函数：
Linker.foo();
但它会抛出：
app.js:4654 Uncaught TypeError: Linker.foo is not a function
有人能告诉我如何调用foo()方
浏览 2提问于2016-07-08得票数 1
回答已采纳
I有一个高阶组件，它接收另一个组件作为参数：
HOC
export default function HOC(Comp) {
return class extends Component {
doSomething() {
const temp = // the Comp's clientId prop???
}
........
}
}
子组件
@HOC
export default class SubComponent extends Component {
.....
static proptypes = {
浏览 0提问于2016-02-06得票数 1
回答已采纳
基本上，我有一个名为Timeperiod的组件，它是一个下拉列表，用户将选择诸如“今天”、“昨天”、“上周”等值。
我想在许多其他组件中重用<Timeperiod>组件，问题是如果我在另一个组件中调用它，我将无法访问它们选择的值。
我知道另一种选择是在时间段内调用我的其他组件，并根据时间段状态传递属性，但这不意味着我需要像类一样创建多个时间段吗？
redux或者别的什么是处理这些情况的好方法吗？
这是我的密码箱：
现在我只让App.js调用Timeperiod，但是我也会有更多的类调用它。我希望能够访问在App.js中选择的日期，同时使时间段类可重用。
浏览 2提问于2018-11-08得票数 1
回答已采纳
3回答
仍然有关于ReactJS =的愚蠢问题)，有什么方法可以添加公共函数来响应组件吗？我试着做这样的事情：
var LoginForm = React.createClass({
getInitialState: function() {
},
render: function() {
},
MyFunc: function () {
}
})
...
var login_form = LoginForm({});
React.renderComponent(login_form, document.body);
...
login_form.M
浏览 3提问于2014-10-05得票数 6
回答已采纳
2回答
我有一个目录结构，如下面的屏幕快照。
在从LoginComponent进行登录时，我希望将登录数据传递给UserProfileComponent，如果没有登录，那么默认情况下将加载DefaultCompoent。
为此，我对组件进行了如下管理。
LandingComponent.js
export default function LandingComponent(props) {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [userName, setUserName] = useState(
浏览 0提问于2021-03-12得票数 0
回答已采纳
我有以下几点
class EntityProfile extends React.Component {
constructor(props) {
super(props);
}
render() {
console.log(this.props.location) // This doesn't work
console.log(window.location.hash.split('/')[2], 'this is my id')
return (
浏览 10提问于2021-05-21得票数 2
回答已采纳
你好，ReactJS开发者，我想问一下，是否有可能只在ReactJS中创建CRUD应用程序而不使用Redux和任何其他技术。因为ReactJS在MVC中是V的，所以在没有模型和控制器的情况下，如何能够创建CRUD应用程序。
预先感谢
浏览 3提问于2017-12-19得票数 1
我是第一次接触reactjs。我的render方法每次都会从数据库中获取数据，并停止所有其他活动的运行。它每毫秒获取一次数据，但没有其他功能在运行，比如设置状态etc.how从数据库获取数据，并并行执行其他任务，如设置状态并将数据分配给数据库。我使用的是firestore，所以如何同时从数据库获取数据和将设置数据分配到数据库。 db.collection(this.state.user.email).doc(this.state.hisemail).get().then(docr =>{
// console.log(docr.data())
浏览 25提问于2020-09-02得票数 0
4回答
我正试图精巧地重构组件，这样我们就可以很容易地将该组件用于相同的用途。
我有两个组成部分，
NewPurchaseOrder (父本)
SelectWarehouse (儿童通讯)
SelectWarehouse组件将在NewPurchaseOrder组件中呈现可用仓库的下拉列表。
父组件有一个状态warehouseId来跟踪选定的仓库，从我正在执行的子组件更新父组件状态(warehouseId)，
父组件
<SelectWarehouse
updateTarget={ ( ghostValue ) => {
this.setState( {
浏览 1提问于2017-06-04得票数 0
我只是在做一个ReactJS教程，我点击了这个：
renderForm() {
return (
<div className='note'>
<form>
<textarea ref={input => this._newText = input}/>
<button><FaFloppy0/></button>
</form>
</
浏览 0提问于2018-05-25得票数 0
回答已采纳
我想在index.html中加载，onLoad='someMethod'将调用一个单独的javascript文件中的方法。然后，该方法将打印到控制台。
加载客户端库没有任何问题，但是消息没有从控制台打印出来，我认为这是因为根本没有调用该方法。
这是我的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<
浏览 20提问于2016-05-07得票数 24
回答已采纳
2回答
我在react上工作，并希望指定href链接到react js中的另一个组件。下面是我正在处理的href属性，并希望重定向到另一个名为MenuForm的组件。此组件具有用于菜单输入的表单。我希望表单在我单击菜单链接后打开。
<a href="#" className="btn btn-primary">Menu</a>
我要重定向的组件是MenuForm <MenuForm />
浏览 4提问于2019-03-14得票数 0
3回答
如何在挂载后更新状态，或者如何在react中从一个页面移动到另一个页面时传递状态。
在我的场景中，通过单击按钮Add New，它将定向到AddNew页面，因为单击save将重定向到display页面，这是可行的。当我在显示中移动到添加新页面时，多选保持不变(始终保持不变)，如何在重定向后获得渲染状态
class Display extends React.PureComponent{
constructor(props) {
super(props);
}
componentWillMount() {
console.log(this.state.language);
浏览 1提问于2019-12-04得票数 0
我在下面的问题中遇到的问题是存储在'one.js‘中的代码 const One= (props) => {
const [isValid, setIsValid]=useState(true);
return(
<div>Hello</div>
);
}
export default One; 下面是存储在'two.js‘中的代码 import One from './one.js';
var Two=()=>{
return(
<div>Two</div&g
浏览 23提问于2019-09-27得票数 0
1回答
我有功能成分FilterBar -
const FilterBar=()=>{
....
....
useEffects..
states...
function apiCallToFilters()
{
...
...
}
...
..
}
由于不能共享整个代码，所以我已经共享了一个结构和一个方法，我想通过jest来测试它们。
我写了FilterBar.test.tsx -
describe('Filter Bar', () => {
it('All Api Calls', () => {
const wrappe
浏览 5提问于2022-05-11得票数 0
回答已采纳
1回答
Reactjs屏幕没有呈现
、、、、
我认为问题是在交换机，在反应-路由器的版本或在路由.只有当我在这个类中创建和应用代码时，启动的屏幕才不会呈现并保持白色。我已经更改了react路由器-dom的版本，但是我不知道是什么。在routes.js:的代码下面。
//react-router-dom version: "^5.3.0"
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Home from './pages/Home';
import Header from './compone
浏览 2提问于2022-02-20得票数 0
我想将组件从另一个文件中获取到try-catch块。因此，对于示例，我在一个文件中创建了该组件。
const Example = () => {
return (
<div>
<h2>this is a test</h2>
</div>
);
}
export default Example.
在App.js文件中，我有一个尝试-捕捉块，但是当我向catch导入新组件时，它不会显示出来。但是，如果调用返回语句中的相同组件，则会显示。举个例子
从"./filename“导入示例
function App() {
functi
浏览 3提问于2022-09-11得票数 0
1回答
我最近开始学习ReactJs，我需要一些帮助。我已经在我的项目中创建了两个组件。第一个是MainComponent，如下所示： constructor(props) {
super(props);
this.onDishSelect = this.onDishSelect.bind(this);
this.state = {
dishes: DISHES,
selectedDish: null
};
}
onDishSelect(dishId) {
this.setState({ selectedDish: di
浏览 18提问于2019-12-09得票数 0
class A extends Component {
constructor(props) {
super(props);
this.state = {
fruitsDetailsList: [],
fruitCode: this.props.fruitCode,
};
}
showModal = () => {
this.setState({ show: true });
};
hideModal = () => {
this.setState({ show: false });
};
浏览 0提问于2019-09-22得票数 1
回答已采纳
3回答
我是新的反应，我发现在眼睛里看到的组件充满了大量的函数和变量初始化连同UI。能把他们分开吗？
而不是默认设置，如下所示。如何将业务逻辑分离到另一个文件中？
function MyComponent() {
const [data, setData] = useState('');
const someFunc = () => {
//do something.
};
... some 100-liner initializations
return (
...
)
}
浏览 5提问于2021-09-26得票数 32
回答已采纳
我想从一个实用程序函数中使用this.getOwnerComponent()来访问我的SAPUI5应用程序组件，例如格式化程序或类函数，这在控制器中工作，但放在另一个文件夹中的实用程序或格式化程序函数不起作用。我不想用sap.ui.getCore()，有没有别的办法呢？
浏览 16提问于2018-08-11得票数 0
我正在寻找隐藏一个输入域的基础上选择的值在一个antd表单中的另一个。我指的是this question (看看一些人是如何支持(并接受) this answer的。但是，它对我不起作用。也许是因为我在动态表单设置中使用它？ 不管怎样，下面是我的代码(我试图在status的基础上隐藏business_name字段)： <Form initialValues={{relative: [{"status": "Business", "business_name": "ABC inc"}, {"status":
浏览 156提问于2020-07-15得票数 0
我在一个react应用程序中有两个不同类的组件。我需要通过单击另一个类中的按钮来调用另一个类中的函数。
changeTitle () {
this.setState({header: 'New title' });
}
我尝试使用import。
import Material from './Material'
<Link to="/Material">
<button className='button' id='button-1' />
<label className
浏览 3提问于2018-10-04得票数 1
我刚开始使用VSCode和编程语言reactjs，如果这很明显，请原谅。我对以下情况感到不安：
在许多reactjs项目中，定义在一个name.Sometimes，文件中的组件是在另一个脚本中导入到另一个不同的中的，在.js文件中定义的组件甚至不使用名称导出。例如，export default (...) => {... some code ...}或export default {...}
在这些情况下，如何在整个项目中找到组件的所有出现？
我需要的是一种方法或工具，它可以定位导入/使用组件的所有位置，因为对名称执行“全局搜索”和“匹配大小写”在这些情况下根本没用。1.它是以不同的名称
浏览 3提问于2021-06-11得票数 0
我有一个<Loading />组件，它封装了我的应用程序中的所有路径。
<Loading />组件具有一个属性isLoading，它接收一个Redux状态变量，该变量指示Loading组件是否可见。
function App() {
const isLoading = useSelector((state) => state.loading.value)
return (
<Loading isLoading={isLoading}>
<BrowserRouter>
浏览 9提问于2022-11-15得票数 1
我发现很难创建一个反应式的浏览器路由。以下是我想做的事：
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Navbar from './components/navbar/Navbar';
import RecipeList from './containers/recipe-list/RecipeList';
import Recipe from './containe
浏览 6提问于2021-04-14得票数 1
回答已采纳
1回答
我在组件的Hue类中有一个变量：
export default class Hue extends Component {
state = {
toggleState : false,
toggleWhite : false
}
render(){...}
...
}
在这个组件中，我可以修改如下值：this.state.toggleState = true
我有另一个处理websocket连接的组件，当我收到数据时，我想修改Hue类中的数据。但是，即使我在websocket组件中导入了Hue，我也无法修改该值。
我已经尝试过了：Hue.state.
浏览 20提问于2018-02-10得票数 0
回答已采纳
我有一个reactjs rendermethod，我试图通过一个函数设置一个变量，它看起来像这样(你猜对了，不起作用)：
render() {
let myVariable=''
//this function changes/sets myVariable
this.changeMyVariable()
return (
<div>{myVariable}</div>
);
}
如何通过另一个函数设置在渲染中使用的变量，类似于上面的示例。我还尝试
浏览 1提问于2016-11-23得票数 7
回答已采纳
我在使用反应性路由器-dom V5，
在组件中，在呈现时，我必须显示一个按钮，该按钮将将我重定向到另一个组件布局：
我已经说过：
import React, { Component } from 'react';
import DashboardLayout from "../../views-layouts/DashboardLayout";
import { BrowserRouter , Switch ,Route , Link } from 'react-router-dom';
import { useHistory } from &#
浏览 2提问于2021-06-08得票数 0
回答已采纳
我有一个问题:我想从URL+ImageUrl获得coinData。
在Vue中，我只需在组件中创建一个方法：
getCoinImage: function(symbol) {
return CRYPTOCOMPARE_API_URI + this.coinData[symbol].ImageUrl;
}
然后调用视图模板中的函数，它将返回我正在寻找的图像的完整URL。
我该怎么做呢？
class App extends Component {
constructor(props) {
super(props);
this.state = {
cryptos: [],
浏览 0提问于2017-11-17得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
