从一个react组件中激发另一个react组件的函数
从一个React组件中激发另一个React组件的函数可以通过以下几种方式实现：
- Props传递：可以通过将函数作为props传递给子组件，子组件可以在需要的时候调用该函数。父组件定义一个函数，并将其作为props传递给子组件，子组件可以通过props调用该函数。
// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends React.Component {
handleClick() {
console.log('函数被激发');
}
render() {
return (
<div>
<ChildComponent onClick={this.handleClick} />
</div>
);
}
}
// 子组件
import React from 'react';
class ChildComponent extends React.Component {
render() {
return (
<button onClick={this.props.onClick}>激发函数</button>
);
}
}
export default ChildComponent;- Context上下文：可以使用React的Context API来实现组件之间的函数传递。父组件可以将函数定义在Context中，子组件可以通过Context访问并调用该函数。
// 创建一个Context
const MyContext = React.createContext();
// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends React.Component {
handleClick() {
console.log('函数被激发');
}
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 (
<MyContext.Consumer>
{handleClick => (
<button onClick={handleClick}>激发函数</button>
)}
</MyContext.Consumer>
);
}
}
export default ChildComponent;- 使用第三方状态管理库：可以使用像Redux或Mobx这样的第三方状态管理库来实现组件之间的函数传递。通过在状态管理库中定义函数，并在需要的组件中调用该函数。
这些方法可以根据具体的需求和项目结构选择使用。在实际开发中，根据组件之间的关系和数据流动的方式，选择合适的方法来实现函数的传递。
相关·内容
1回答
我相信我正在尝试完成一件简单的事情，但是失败了。 React并没有像我希望的那样从另一个组件的ChildComponent中调用'alertFunc()‘。 下面是ChildComp： class ChildComp extends React.Component {
constructor(props) {
super(props);
this.state = { };
this.input = React.createRef();
}
alertFunc = () => {
alert
浏览 15提问于2020-07-13得票数 0
回答已采纳
2回答
当我学习时，人们总是说您应该将状态保持在父组件中，并将它们作为道具传递给其子组件。
但在现实世界中，每当我开始构建一个react应用程序时，我最终都会将数据从子组件传递给它的父组件。
例如，如果我必须在我的react应用程序中实现一个表单，我会为它创建一个额外的组件(例如，FormComponent)并将它导入到我的FormComponent中。
但是现在，我必须将表单数据从FormComponent传递给App组件。换句话说，从子组件(FormComponent)到父组件(App组件)。
这只是一个例子。--通常，我总是在这样的情况下结束:我必须将数据从一个孩子传递给父级，而不是通过传递。
浏览 7提问于2020-07-06得票数 4
我试图从一个组件访问另一个组件的状态。
FetchCompo.js
// import React from "react";
import React, { useState, useEffect } from "react";
//more imports
const FetchUserItems= () => {
//some state
const [userFirstName, setUserFirstName] = useState("");
const [userItem, setUserItem] = use
浏览 2提问于2021-02-22得票数 0
我是一个新的反应和在一个小问题。我有一个组件，component1。它有一个功能。 class ReportModal extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: false,
imagesList: [],
code: []
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
mo
浏览 22提问于2021-07-01得票数 0
我有一个包含类组件的类。
当我提供要使用的onClick支柱并试图传递一个函数时，我会得到以下错误：
AddForm.js:74 Uncaught：_this3.props.onClick不是一个函数
代码：
export default class Company extends React.Component {
constructor(props) {
super(props);
this.state = {
AddOrView: <AddForm header="Add User" formFields={this.fields} /
浏览 3提问于2017-01-23得票数 3
回答已采纳
我已经在react-native导航中设置了底部标签的导航，这很好用。
bottomTabs: {
id: 'BOTTOM_TABS_LAYOUT',
children: [
{
stack: {
id: 'HOME_TAB',
children: [
{
component: {
id: 'HOME_SCREEN'
name: 'HomeScreen'
浏览 18提问于2020-05-08得票数 3
回答已采纳
我刚开始使用react本地android，我想知道如何在react中将值从一个组件传递到另一个组件--本地android，我只想知道2件事，
如何传递数据
如何检索数据
提供任何被理解为easy.thanks的参考或链接
浏览 6提问于2017-10-05得票数 1
1回答
我有一个包含以下代码的react类：
getInitialState: function(){
return {
results: false,
value: ''
};
},
handleClick: function(event) {
this.setState({ results: true });
event.preventDefault();
},
handleChange: function(event){
this.setState({value: event.target.v
浏览 4提问于2016-11-11得票数 0
在ReactJS中，如何从一个类的函数中调用另一个类的呈现函数？
var A = React.createClass({
render: function(){
//"something" that needs to b executed
}
});
var B = React.createClass({
funct1 : function(){
//Place where u need "something" to b executed
}
});
浏览 1提问于2016-07-15得票数 1
我正在尝试使用React创建一个简单的ToDo应用程序，下面是我的app.js文件：
import React from 'react';
import { render } from 'react-dom'
import ToDoList from './toDoList'
import CreateToDos from './createToDos'
import _ from 'lodash'
let toDos = [
{
task: 'task 1',
浏览 7提问于2017-01-18得票数 1
回答已采纳
我从类组件中调用一个功能组件。这是我的功能部件，
import React, { useState, useEffect } from "react";
import {useNavigate} from "react-router";
const UtilsExt = () => {
const navigate = useNavigate();
navigate('/');
};
export default UtilsExt;
我是从一个按钮从一个类组件点击事件以上调用。当我这样做的时候，我得到了这个错误。
错误
浏览 6提问于2022-02-03得票数 2
回答已采纳
我需要将名为“名称”的道具从一个反应性组件传递到另一个，但是有些地方出错了。你能告诉我怎么做才对吗？
提前感谢
import React from 'react';
export class Greeting extends React.Component {
render() {
return (
<h1>Hello World and {this.props.name}</h1>
)
}
}
import React from 'react';
import ReactDOM from '
浏览 4提问于2022-05-02得票数 0
2回答
我使用聚合物，Html和Javascript。
我想找到任何简单的方法来调用一个函数从一个聚合物组分到另一个。让我来描述一下我想要达到的目标。
我有聚合物组分myComponent。在这个组件容器中有一个名为start的按钮
<button on-click="_start" id="start">XyZ</button>
还有第二个组件(假设它是子组件，因为它在myComponent中，在<script>部分中有函数_addNew )。
现在，我想通过单击带有_addNew id的按钮来启动#start函数。我的问题是，当这
浏览 4提问于2016-02-23得票数 1
回答已采纳
问题是onChange事件不会在输入标记中触发。我之前使用LinkedStateMixin来跟踪输入值。最近，我想添加onChange事件来运行一些函数，然后删除了LinkedStateMixin，但onChange无法触发。我试图将e.stopPropagation()添加到setUsername()中，但它也不起作用。我尝试了其他事件，如onKeyDown、onClick等。他们都不能被解雇。有什么问题吗？
var React = require('react');
var SessionActions = require('../../actions/sessi
浏览 13提问于2016-07-30得票数 1
回答已采纳
我正在开发一个示例ReactJS应用程序，其中我希望将一个变量从一个组件传递到另一个组件。
class Layout extends React.Component{
constructor(props) {
super(props);
this.state = {keyword: ''};
}
render() {
return (
<div className="wrapper">
<Search
浏览 11提问于2017-02-23得票数 0
1回答
我使用的是中的代码，但我不明白一件事:我在useEffect中添加了一个控制台日志，当我在最终添加括号时，您可以看到下面的内容。这使得useeffect只运行一次，而且看起来很有效，因为当我刷新页面时，控制台日志只显示一次。但是当我在浏览器上使用React开发人员工具时，状态windowsSize会根据我更新的窗口大小不断更新值。
const Navbar = () => {
const [windowSize, setwindowSize] = useState(window.innerWidth);
const updateWindowsSize = () => {
s
浏览 4提问于2020-05-25得票数 0
回答已采纳
2回答
我开始在React中使用道具，但我不了解它们的用法。从一些简单的事情开始，即通过控制台显示消息。在一个组件中是按钮，在另一个组件中是消息，但我什么都没有收到。
第一个组件
export const FirtComponent = ({play}) => {
return (
<>
<h2>i'm First Component</h2>
<button onClick={play}>Send</bu
浏览 1提问于2021-10-26得票数 0
我希望传递布尔状态以将className从一个组件更改为另一个组件。我试图通过{this.props.isOpen}传递它，但是它没有工作。如何将状态值传递给另一个组件？
父组件
class Category extends React.Component {
constructor(props) {
super(props);
this.state={ isOpen: false };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({ is
浏览 5提问于2017-09-11得票数 1
回答已采纳
1回答
如何正确地将参数从一个组件传递到另一个组件。在我的场景中，当我通过控制台将pass参数记录到另一个组件时，它们在最后一个组件中的实际字符串之前有一个空字符串。它应该只是实际的字符串。
组件1：
import React, {useState, useEffect} from 'react'
import {dataComponent} from './include/childComponent'
export default function Parentcomponent(props) {
const [data, setdata] = u
浏览 9提问于2019-08-02得票数 0
回答已采纳
我想从一个组件到另一个组件访问状态。为此，我只想将contextprovider包装到单击按钮时状态发生变化的组件，并从usehook返回状态，以便另一个组件可以访问该状态。
下面是组件在未应用上下文的情况下的外观，
function Parent () {
return (
<UploadButton/>
);
}
function UploadButton () { //this is where state is set
const [isDialogOpen, setIsDialogOpen] = React.useState(fa
浏览 0提问于2020-07-17得票数 1
我希望将props从一个组件传递到另一个组件，并在第二个组件中将其用于组件声明之上的导入
这是为了使用相同的组件，不需要创建4次，每次使用另一个SVG。
我用的是React、Javascript、Webpack、巴别塔。我还使用svgr/webpack从SVG图片创建组件，使用SVG而不是< img >对我来说至关重要。
import React from 'react';
import RightNavItem from './right_nav_item';
const RightNav = ({navitems}) => {
con
浏览 5提问于2019-07-13得票数 0
回答已采纳
我有下一个代码，应用程序应该从一个api中获得一个json，然后将整个json作为一个支柱传递给它，这样它就可以在每个组件文件中被处理，并将元素返回到屏幕上。
问题是，我还没有找到一种方法来存储从fetch到变量的信息。如果我只是传递一个在同一个文件中声明的json，它会很好地工作，但不能使它与获取的信息一起工作，开发人员工具显示json正在被检索，但它似乎没有在组件中被访问，正如您在组件中看到的那样，我尝试使用globalData在该变量中使用json存储，但是它破坏了我的应用程序，控制台说"Uncaught :无法读取未定义的属性(读' name ')“，其中名称是
浏览 1提问于2022-06-22得票数 0
有一个显示帖子的代码，通过单击帖子可以显示该帖子的完整内容。
import React from "react";
type respX = {
"id": any,
"userId": any,
"title": any,
"body": any,
}
interface PropsI {
}
interface StateI {
data: respX[];
changedBody: string
changedTitle: string
}
e
浏览 12提问于2020-02-03得票数 0
回答已采纳
我想从一个页面重定向到另一个页面，并传递道具。但我不希望这些参数在url中。
方法：
saveForLater(){
if (typeof window !== "undefined") {
window.location.href = "./DataDisplay/";
}
};
我检查了urlparams，我们可以在url中设置{"id":content}。但我不希望在url中传递数据。
我不能在方法中使用Link / Route。有没有什么方法可以做到这一点/有什么库可以签出？请给我们建议
代码示例：
浏览 1提问于2020-07-21得票数 1
我有一个名为Settings的组件，它包含一个变量(IsActive)，useState默认为true。在单击按钮时，我需要从该组件的外部更新变量(IsActive)的状态。该按钮不是此组件的一部分。如何在单击按钮时更改该变量的状态。
文件Settings.tsx
import React, { useState } from "react";
import ReactDOM from "react-dom";
export const reportSettings = () => {
ReactDOM.render(<Setting
浏览 5提问于2020-03-19得票数 1
回答已采纳
如果您已经处理了react和refresh路由器，您将看到在每个页面url和部分页面更改中，页面不会刷新整个页面，而是只会更改页面的一部分。而且，在Google的控制台日志中，它不会刷新，从而证明它在没有整个页面刷新的情况下更改了url。
我认为这种技术只有在一些像样的前端框架中才有可能，比如React或frontend。但不是因为
我发现了一个名为nodebb的论坛软件(它使用的是Node.js，可能与春季引导类似)，而且它根本不使用react，但它表明它实际上只能使用node.js这样的后端框架。你可以在上查看
由于我意识到它可以在不使用体面的前端框架的情况下实现，所以现在我想知道在Jav
浏览 4提问于2021-01-03得票数 0
我是react的初学者。我正在尝试使用react-hooks将数据库的值从一个文件发送到另一个文件，并得到以下错误，有人能帮助我吗？
第5:41行:不能在顶层调用React Hook "useState“。React Hooks必须在React函数组件或自定义React Hook函数react-hooks/rules-of-hooks代码中调用：
import React, {useState, useEffect} from "react";
import Axios from "axios";
const [collegeList, setcol
浏览 47提问于2021-05-18得票数 0
我有一个带切换开关的React组件(开或关)。开/关状态由组件自身的状态(this.state)处理。
但我希望当用户从一个页面转到下一个页面时，该状态保持不变。例如，它们在home.html上，然后当用户点击另一个页面时，比如about.html。
此外，这不是一个单页面应用程序。我是否需要Redux、Mobox或其他状态管理工具？欢迎提出建议。
浏览 2提问于2018-02-15得票数 1
将数据从一个类传递到驻留在同一级别的另一个类，而无需在react本机中导航。
浏览 20提问于2020-09-30得票数 0
回答已采纳
在我的应用程序中，定义了调用特定API的通用操作。
这个动作/API可以从不同的选项卡/标签的内部屏幕中调用。
当我从一个选项卡调用action并尝试从另一个选项卡为相同的API访问相同的操作时，我得到了异常。
根据输入参数，这个API响应具有两个不同的输出。
在从另一个选项卡进行第二次调用时会出现异常。错误的是，第二个调用似乎试图访问实际预期的第一个调用的输出参数。
问题:在多个地方同时使用相同的操作有问题吗？是否需要为每个选项卡/调用创建/复制操作？
React："axios"："^0.16.2"，"react"：
浏览 4提问于2017-11-17得票数 0
1回答
我需要将功能包装在一个按钮中。但是，当我在另一个组件的render方法中调用HOC时，我什么也得不到。
我有一个特别的
import React,{Component,PropTypes} from 'react';
export let AddComment = (ComposedComponent) => class AC extends React.Component {
render() {
return (
<div class="something">
浏览 0提问于2016-10-14得票数 0
2回答
我正在使用React-router，并且我想从一个函数中更改页面。该函数在单击侧边栏中的按钮时被调用。我可以通过将按钮交换到react-router中的Link标签来完成此操作。但是，我希望应用一些样式，然后更改页面以呈现新的组件。所以如何从一个函数中改变页面。
我在react路由器中尝试了history.push和重定向，但都不起作用。
浏览 4提问于2018-07-10得票数 0
1回答
我正在尝试创建一个用作颜色选择器的组件。单击.swatch元素将打开弹出窗口(其中包含一个扩展整个屏幕的.cover div )。单击盖子(弹出窗口外)将关闭弹出窗口。非常标准的行为(我从复制了代码)。
这可以很好地工作，直到我在.swatch中添加了一个input标记，然后无论我单击哪里，输入click事件都会触发。
这是我在弹出窗口外单击时在控制台中得到的结果，例如：
handleClose
renders
click input
handleClick
renders
我的组件ColorPickerInput.jsx
import React from 'react'
i
浏览 2提问于2017-05-12得票数 1
我必须从另一个功能组件调用一个功能组件，那么我如何在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
我正在尝试弄清楚如何将react组件从一个组件移动到另一个组件。例如，以非常简单但有趣的纸牌游戏为例:你可以将任何一张牌放到一副牌上，或者从这副牌中拿到最上面的一张牌。
为了让它工作，我有4个类- <Board>，它包含两个<Card Collection>："Deck“和"Hand”组件。在构造函数中，它们生成CardModel项并通过<Card>组件呈现它们。<CardCollection>组件有特殊的onCardClick prop，它接受回调函数。在我的例子中是onCardClick={/*this is equal to
浏览 22提问于2016-07-22得票数 5
回答已采纳
在React中，我们可以使用props将数据从一个组件传递到另一个组件，但是我想知道如何在发出API请求时将数据从一个组件传递到另一个组件。
在后端，登录凭据。
如何在用户登录时传递用户名？当用户登录时，我的页面应该显示“欢迎”。
您可以签出中的代码
下面是来自API的json数据：
{
item: [
{
"id": "145741863",
"firstName": "ABCDEF",
"email": "qwerty@yahoo.com",
浏览 0提问于2020-02-16得票数 4
回答已采纳
2回答
我是ReactJS的新手。当我试图从一个页面导航到另一个页面时，history.push('/newpage')对我不起作用时，我仍然坚持反应路由。登录服务调用成功，我想导航到另一个页面。
我正在使用下面的版本
“反应”："^16.13.1"，“反应-多姆”："^16.13.1"，“反应-路由器-多姆”："^5.2.0"，
import React, { Component } from 'react';
import { useHistory } from 'react-router-dom';
浏览 1提问于2020-05-20得票数 2
回答已采纳
我目前正在React中创建一个象棋游戏，用于学习目的。我遇到的问题是将React组件从一个父组件移动到另一个父组件，同时保留道具。我读过关于ReactDOM.createPortal()的文章，但我似乎不能让它工作。
为了说明这个问题，我创建了一个包含两个容器的简单React应用程序，其中一个容器中有一个按钮。目标是在按钮被单击时将其移动到另一个容器中。
export default class ParentLeft extends React.Component{
render(){
return(
<div className="container&
浏览 0提问于2019-08-05得票数 0
1回答
我正在创建一个使用react的uses应用程序。我有一个作为主组件的主App.js文件。然后我有一个子组件，它具有创建按钮的功能。例如，我有一个包含徽标、文本等的renderLogoutButton()。
我需要一个不同的子组件中的注销按钮，并且不想重复这个函数。如何从一个React组件导出renderLogoutButton()并将其导入到另一个React组件？
我们非常感谢您的帮助，请提前向您致谢。:)
浏览 15提问于2018-06-05得票数 0
回答已采纳
1回答
我基本上有一个两个步骤的表单，它被分成可切换的标签。用户需要能够在不丢失已经填写的信息的情况下从一个选项卡转到另一个选项卡。因此，我需要找到一种方法来防止React使我的状态无效。 第一个表单组件： const initialValues = {
nome: "",
cpf: "",
email: "",
telefone: "",
nomeResp: "",
cpfResp: "",
};
const 1Form = (props) => {
const [v
浏览 13提问于2021-10-18得票数 0
2回答
最近，我学会了如何将道具从一个组件传递到另一个组件。在我的例子中，从<FileTree>到<TextBox>，如下所示：
但是之后，我对代码进行了一些重新组织，现在可以在<App> (App.js)中看到React的结构了。我决定把<FileTree>和<TextBox>并排放在一起，带着靴带。
因此，从逻辑上讲，我认为将props从<App>传递给<TextBox>和以前一样:从<FileTree>到<TextBox>。不幸的是，事实并非如此。
目前，这是<App>内部的代
浏览 0提问于2018-04-27得票数 4
回答已采纳
我希望在reactjs中将状态值从一个组件传递到另一个组件。正如你所看到的，我正试图在输入中投入价值。值在一个组件中声明，并必须传递另一个组件。Showvalue是我声明状态值的组件。我想把它变成输入值
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Showvalue extends Component{
constructor(props){
super(props);
this.state = {
浏览 0提问于2018-08-01得票数 1
回答已采纳
2回答
我试图在componentDidMount函数中为一个特定的ID运行get请求，它返回每个id和每个值，而不是只访问id的值。这是我的代码。 state = {
marketing: [],
};
async componentDidMount() {
axios.get(config.apiEndpoint, { params: { id: 1 } }).then((res) => {
console.log(res);
this.setState({ marketing: res.data });
}); config.apiE
浏览 41提问于2020-07-15得票数 0
所以我是ReacJS和JavaScript的新手，我被困在了一个问题上。我有一个由功能组件构建的应用程序，我试图做的是从一个组件中查询一个DB (其中模式为2列、id和内容)，然后将该查询的结果( onClick，见下文)传递给另一个同级组件。到目前为止，我得到的是：
App.js:
const App = () => {
// *Other functions and states here*
const [content, setContent] = useState('');
const getBookContent = useCallb
浏览 5提问于2020-04-11得票数 0
回答已采纳
我使用react-router-dom v4.3.1进行客户端路由。我是个反应新手，不知道如何在不使用url参数的情况下将数据从一个视图传递到另一个视图。在Angular中，Angular路由器具有数据特性，您可以在其中传递与路由关联的数据。下面是一个例子： const appRoutes: Routes = [ { path: 'hero/:id', component: HeroDetailComponent, data: { title: 'Hero Detail' } }, ]; 你能在react-router-dom中
浏览 22提问于2019-03-07得票数 0
回答已采纳
我想知道我的代码出了什么问题-每次我得到这个消息“无法读取未定义的属性'params‘”，我想从一个页面传递一个道具到另一个页面，我已经获取了多个API，并从第二个API中获取了一些图像，以便在另一个视图中传递它。第一个应用程序接口在ProfileHeader.JS上运行良好，但在ProfileTabs.JS上的第二个应用程序接口面临一些问题。
我不知道我的问题在哪里--“对不起，我的英语很差。”
我的第一个观点是：
ProfileLanding.JS
import React, { useState, useEffect } from 'react'
import
浏览 2提问于2019-11-04得票数 1
我正在尝试将静态HTML主题转换为react主题。静态主题有一些用于更改CSS类的简单JS。我已经将这些脚本包含到我的react的index.html中。现在的问题是，当我试图从一个组件导航到另一个组件时，加载动画开始并且没有进一步渲染，控制台显示一些关于成员未定义的错误。但是当我手动重新加载页面时，它呈现得很好。有没有人有同样的问题？可以做些什么呢？ 我还尝试从componentDidMount()中的组件中删除并重新加载js文件。
浏览 38提问于2019-04-16得票数 1
1回答
在React路由器v5中，中有一个组件，您可以使用该组件将用户从一个路由重定向到另一个路由，如下所示：
import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
// ...
function App() {
// ...
return (
<div>
<Header />
<Switch>
<Route path="/" elem
浏览 1提问于2022-06-11得票数 0
我正在尝试构建一个React，但是对于React/RN生态系统来说还是有点陌生，所以我可能只是误解了我所遇到的问题。
我有一个应用程序，其中很多页面的结构如下：
<View>
<NavComponent />
<View>
{/* Page component structure/logic here */}
</View>
</View>
NavComponent加载带有TouchableOpacity元素的可切换导航菜单，如下所示：
Go to Screen #1
Go to Screen
浏览 3提问于2020-03-17得票数 0
我试图将数据从一个类传递到另一个类，并将其显示在主类中，即用户在输入字段(组件A)中写入某些内容，同时数据或输入值显示在另一个组件(组件B)中，这两项工作都由组件C显示。但是我找不出我的代码出了什么问题。下面是我的虚拟代码，但实际代码与下面的代码相同。 class A extends React.Component {
constructor(props) {
super()
}
render() {
return (
<input name="firstName" placeholder=
浏览 30提问于2020-06-15得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
