React -为我的子组件提供函数
React是一个用于构建用户界面的JavaScript库。它将复杂的用户界面拆分成一系列可重用的组件，通过这些组件构建整个应用程序。React采用了虚拟DOM的概念，通过比对虚拟DOM和实际DOM的差异来更新页面，提高了性能和效率。
React中的子组件可以通过属性(props)的方式从父组件中获取函数。父组件可以将函数作为props传递给子组件，在子组件内部调用该函数。这种方式允许子组件与父组件进行通信，实现数据的传递和状态的管理。
使用React提供函数给子组件的优势是可以实现组件之间的解耦合，使得代码更加模块化和可维护。同时，通过函数的方式，可以将组件的功能进行划分，提高代码的复用性和可读性。
React在前端开发中广泛应用，特别适合构建大型、复杂的单页面应用。它具有高效的渲染能力和良好的可扩展性，可以与其他框架或库进行无缝集成。React还提供了丰富的生态系统和社区支持，有大量的第三方库和组件可供选择。
对于React开发，腾讯云提供了一些相关产品和服务，如云服务器、云数据库、云存储等。你可以通过以下链接了解更多腾讯云的相关产品和产品介绍：
通过使用腾讯云的产品和服务，可以在React开发中实现灵活的部署、高效的数据存储和可靠的资源管理。
相关·内容
我有子组件：
import * as React from "react";
import {Component} from "react";
import {connect} from "react-redux";
class Child extends Component<any, any> {
childFunction = () => {
console.log('childFunction');
};
render() {
return &l
浏览 16提问于2019-07-13得票数 0
我很清楚为什么在创建React中的动态子程序时需要添加一个支柱。让我感兴趣的是下面两段代码的行为
这在children上迭代，只使用
const App = () => {
return (
<Parent>
<span>Child 1</span>
<span>Child 2</span>
<span>Child 3</span>
</Parent>
);
};
const Parent = ({ children }) =&
浏览 2提问于2018-05-12得票数 17
回答已采纳
我正在与iScroll和reactJS的结合中挣扎。
此代码示例是用打字本编写的。
我为iScroll创建了一个包装类：
import * as React from 'react';
import * as ReactDOM from 'react-dom';
var iScroll = require('iscroll');
...
componentDidMount() {
this._initializeIScrollInstance();
console.log
浏览 6提问于2015-10-19得票数 1
回答已采纳
3回答
使用
、、
我正在开发一个使用：create-react-native-app创建的反应本机应用程序。
据我所知，最顶层的组件在App.js文件中，并且我已经在那里导入了提供程序，并将它封装在顶层组件周围，但出于某种原因，我仍然收到以下错误：
ExceptionsManager.js:65不变违规:无法在"Connect(App)“的上下文或道具中找到”存储“。或者将根组件包装在一个，或者显式地传递"store“作为"Connect(App)”的支柱。
我做错了什么？
这是我的代码：
import React from 'react';
import { S
浏览 0提问于2017-12-30得票数 0
回答已采纳
1回答
如何在类组件中使用forwardRef与react-redux的连接函数
import React, { Component } from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <ChildCompon
浏览 3提问于2020-10-21得票数 0
1回答
我有一个使用react-router的React应用程序。我的路由的简约版本如下：
<Router>
<div className="App">
<Sidebar />
<div className="app-container">
<Switch>
<Route path="/" exact render={Home} />
<Route path="/logs" e
浏览 4提问于2020-09-29得票数 1
2回答
我在Codeacademy上了React.JS课程。这个问题来自React.JS第二部分。我正在学习编程模式，但我不能理解这个模式是如何工作的
代码：
Parent.js
var React = require('react');
var ReactDOM = require('react-dom');
var Child = require('./Child');
var Parent = React.createClass({
getInitialState: function () {
return { name: '
浏览 7提问于2017-06-14得票数 1
2回答
我有一个Main.js组件，它可以路由到各种组件，包括Listing.js。
Main:它包含一个添加到购物车中的产品数组作为状态。
清单:这是产品清单。它包含数据库中的所有产品作为状态。
My problem:当我通过单击List组件中的按钮将产品添加到购物车中时，它会将产品添加到购物车中，更新主组件的状态购物车。这样做，列表组件重选器，我就松开了访问者在清单上设置的所有过滤器。
当它的父组件的cart状态发生变化时，我希望防止List从rerender。你知道怎么做吗？我试过使用shouldComponentUpdate，但没有成功。
Main.js (父组件)
imp
浏览 1提问于2019-10-31得票数 0
回答已采纳
我把它放在C9上是因为有很多依赖项，在这里阅读代码可能比在这里展示代码要容易一些。
见MainWrapper.jsx、LibraryView.jsx、Library.jsx和connect.js。
应用程序本身在这里运行：
nextjs团队在这里有一个示例应用程序：
但我需要转换我的应用程序，这有点不同。当我这样做时，它给我的错误是：
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from
浏览 3提问于2018-04-12得票数 1
回答已采纳
我在做Reactjs天气项目。在提交后，我将在子组件(Form.js)的方法中获取值，并且需要在父组件(App.js)中获得该值。如何得到这个价值？
App.js文件(父组件)
getWeather = async (e) => {
e.preventDefault();
}
Form.js文件(子组件)
import React, { Component } from 'react'
import Background from '../video/rain_drop2.jpg';
import { ToastContainer, toast
浏览 0提问于2019-10-28得票数 1
回答已采纳
2回答
我刚开始反应，我正在尽我最大的努力把一个应用程序放在一起，所以我创建了两个主要的部分，我想把它们结合起来，但我不知道该怎么做。
下面是我得到的错误：TypeError: Cannot read property 'openSidebar' of undefined
指向这个组件：
// Sidebar button and opening of sidebar
// main function created to open sidebar button
import React from 'react';
import { FaBars } from '
浏览 3提问于2020-11-23得票数 5
回答已采纳
1回答
该模型在hashRouter in App.js下呈现。当其状态isOpen为真时，将显示该模态。
当我试图用redux显示一个Modal时，我就得到了这个错误。
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `TrapFocus`.
in ConnectFunction (at Modal.js:41)
in
浏览 1提问于2019-07-18得票数 6
回答已采纳
我是ReactJS的新手。我希望能够设置React组件的一些属性，然后能够从父React组件访问它。但我不太确定该怎么做。例如，考虑以下两个类：
export default class SubWindow extends React.Component {
click(event)
{
this.myCollection.push({name:'receiptNum',value:$(event.currentTarget).html()});
}
render()
{
return (
浏览 2提问于2016-05-21得票数 0
回答已采纳
我有一个Manager组件，它是父级的，并且具有模式状态。
它有条件地呈现两个与其状态相关的不同成分，
我希望当用户单击子组件中的Add按钮时，父组件的状态会发生变化。
另外，对于其他同级组件，vica相反。
你能帮我解决我的问题，我的意思是，我应该如何改变父状态在子组件点击按钮。
如果你在一个孩子中帮助我，我也会对另一个孩子这样做。
这是父组件：
import {React, useState} from 'react'
import BasePage from './BasePage'
import AddRecordForm from './Add
浏览 5提问于2021-06-10得票数 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
1回答
我有一个KonvaJS舞台的推荐人。在ComponentDidMount中，this.stageRef.current的值为null。你知道为什么吗？ 我的代码如下所示： import React, { useState } from "react"
import { Stage, Layer, Rect, Text } from 'react-konva';
import Konva from 'konva';
class MyComponent extends React.Component {
constructor() {
浏览 120提问于2021-08-01得票数 0
回答已采纳
在这个例子中，我有一个父类组件: Dibf。我有一个子类组件: Header。
我可以设法把道具从父母传给孩子。但我试图通过这样做来向下传递状态(以下代码块的底线)：
export interface IDibfState {
CurrentUserTitle: string;
CurrentUser: string[];
CurrentUserGroups: string;
CurrentUserID: string[];
CurrentUserEmail: string;
FullName: string;
UniId: strin
浏览 5提问于2019-11-21得票数 0
回答已采纳
我是React Native的新手，并且在组件中有一个组件。 我需要从子组件访问父组件的函数。如何访问父进程，例如从子进程访问this.parentNode.myFunc();之类的内容？(当然，不需要将其作为整个视图层次结构的道具传递)
浏览 41提问于2019-04-17得票数 3
4回答
我刚开始学习React & React ，并尽我最大的努力把它学好。在学习过程中，我学习了道具和state，但是这里有一件事让我感到困惑，那就是、父组件、和子组件。
当我们在React或React 中创建组件时，它是这样创建的：
export default class myApp extends React.Component{
render(){
return(
// Do something ...
);
}
}
就是这样。那么，为什么人们会说父组件和子组件等等。是React.Component是父组件还是m
浏览 3提问于2018-10-03得票数 3
回答已采纳
2回答
我正在尝试设置刷新按钮，以便在最终用户创建新票证时，我按下刷新按钮时可以看到新创建的票证。我正在使用Apollo客户端从graphql服务器获取数据。我想知道我应该如何刷新我的表格我尝试了forceUpdate和this.setState()，我验证了它的工作通过把{Math.random()}在渲染函数，但是，它不刷新和给出新的数据，也试着把刷新按钮在button.js仍然存在的问题。window.location.reload()可以工作，但这不是我想要的，有没有什么react可以像任何生命周期钩子一样做，我试过了： componentWillReceiveProps(nextProps
浏览 142提问于2018-12-18得票数 0
回答已采纳
组件文件
// Component A
import React, { ReactElement } from "react";
export const BacklogItemDashboard = (): ReactElement => (
<h1>Backlog Item Dashboard</h1>
);
使用组件文件
import // component
interface IMenuInfo {
choice: string;
**component: ReactElement;**
destin
浏览 3提问于2021-03-25得票数 1
回答已采纳
我正在探索如何使用钩子来响应上下文，并注意到为什么我的自定义路由每次发生上下文状态更改时都会重新呈现。在我的示例中，我创建了一个具有useReducer钩子的上下文提供程序，该钩子可以切换加载状态。
我在路上学到了这个，
当所提供的值发生更改时，提供程序将导致其使用者重新呈现。
但是，当上下文在常规父组件中使用时，它不会重新呈现。
下面是解决这个问题的。
index.js
import React from "react";
import ReactDOM from "react-dom";
import Provider from './Pr
浏览 1提问于2020-12-01得票数 1
回答已采纳
我想更改client = {state:0}，您可以使用this.client.state访问它
我还有一个孩子，里面有一个按钮。当你按下按钮时，我试图改变这个状态变量。
出于某种原因，我发现互联网上的一切都不适合我。我已经坚持了5个小时了，我想是时候自求多福了
import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
import Home from './Components/Home';
浏览 0提问于2018-11-11得票数 0
回答已采纳
1回答
反应钩状态不匹配
、、
我创建了一个监视滚动行为的自定义钩子。但是，当我从使用钩子的组件更改状态时，我确实从控制台日志中看到状态更改，但一旦我开始滚动状态，状态的原始值为true。更奇怪的是，工具与控制台日志输出不匹配。
import React, { useEffect } from 'react';
import useExample from './useExample';
function Example() {
const [status, setStatus] = useExample();
console.log(`example, status: ${sta
浏览 4提问于2020-10-22得票数 0
1回答
我正在构建一个react本机应用程序。我有一个父组件和一个子组件。子组件有一个按钮，其事件处理程序位于父组件中。在事件处理程序的末尾，我还必须更新子组件中的特定状态。因此，我使用父组件中的useRef钩子来创建子组件的引用。现在，事件处理程序函数看起来如下所示
const handleJoin = async (community: TCommunity) => {
// ..........
childComponentRef.current.setIsDataManipulated(true);
// ..........
};
但是在setIsDataMan
浏览 2提问于2021-03-30得票数 1
回答已采纳
现在在react中有很多方法可以做一件事。以memo为例，useMemo、memo(MyComponent)和React.PureComponent有什么不同？他们不是在做同样的事情吗？那么我们今天应该使用哪一个呢？如果我们根据更新的API的日期来判断，我们应该使用useMemo。
浏览 0提问于2021-10-31得票数 0
我正在开发一个使用React的网站。在使用useContext()和useLocation()时，我得到了这个错误。
import React, { useContext } from "react";
import Layout from "../components/Layout";
import { LangStateContext } from "../context/LangContext";
import { useLocation } from 'react-router';
const PricingPage
浏览 9提问于2021-11-30得票数 2
我有一个问题，我想从子组件中获取值并在父组件中使用它。
这是父组件，我通过props将一个值i传递给它的子组件，我想要取回它，那么我该如何实现呢？
import React, { Component } from 'react'
import { render } from 'react-dom'
import {Row} from 'react-bootstrap';
import Rectangle from './Rectangle.js';
import '../App.css';
class Rect
浏览 0提问于2017-05-01得票数 2
1回答
我试图用外部提供的数据动态地更改地图容器的中心。我以字符串的形式获取数据，然后将其解析为数字。但是当我进入康斯特中心时，当我尝试使用它时，我会得到一个NaN。
import React from 'react'
import { useCasparData } from 'caspar-graphics'
import { useTimeline } from '@nxtedition/graphics-kit'
import './style.css'
import { MapContainer, TileLayer, Mark
浏览 5提问于2022-03-14得票数 0
因此，我有一个Operations.js组件，当父组件(ParamsForm.js)中的特定按钮被切换时，它会被呈现。现在，我想要的是，当父组件中的表单被提交时，我希望父组件表单字段的数据以及子组件表单字段的数据能够登录到控制台上。有什么办法可以做到这一点吗？
ParamsForm.js
import React, { useState, useEffect } from 'react'
import { Form } from 'react-bootstrap'
import styles from '../style.module.css'
浏览 1提问于2022-06-25得票数 0
回答已采纳
如何在另一个组件中访问一个组件的状态？下面是我的代码，我试图在组件b中访问组件a的状态。
var a = React.createClass({
getInitialState: function () {
return {
first: "1"
};
},
render: function () {
// Render HTML here.
}
});
var b = React.createClass({
getInitialState: function
浏览 3提问于2016-04-25得票数 47
3回答
父组件包含appbar中的一个按钮和一个绘图区域(在其中，我拖放一些内容，这仅适用于这里的上下文)。我想保持子组件相对独立。
单击此父组件中可用的按钮时，我希望更改子组件的状态。当我使用"componentWillReceiveProps“(这是不安全的)(替换函数”很少使用“)时，它可以工作。，因此我从未成功地从父组件.调用函数(在子组件中)。
反应的最佳实践是什么？(我来自PHP/GO/Python背景)。
家长班：
Class EditionView extends React.Component {
constructor(props) {
super(props
浏览 0提问于2018-10-31得票数 1
回答已采纳
我正在尝试学习上下文API，我想要实现的是在我的标题中显示登录用户，以及根据登录状态操作我的菜单选项(在状态中存储'isAuthenticated‘安全吗？)
我的文脉课：
import React from 'react';
const Context = React.createContext();
export class Provider extends React.Component {
state = {
isAuthenticated: true,
user: {
name: "
浏览 0提问于2019-06-13得票数 7
回答已采纳
我正在学习TypeScript，有些地方让我很困惑。有一点如下：
interface Props {
name: string;
}
const PrintName: React.FC<Props> = (props) => {
return (
<div>
<p style={{ fontWeight: props.priority ? "bold" : "normal" }}>
{props.name}
</p>
</div>
浏览 2提问于2020-01-30得票数 151
回答已采纳
我试图使用子函数内部的useContext来访问上下文道具，但是道具始终是默认的
import React, { createContext, useContext } from "react";
const Context = createContext(undefined);
export default function Component() {
return (
<Context.Provider value={{ variable: 123 }}>
{(() => {
const context_valu
浏览 4提问于2021-10-21得票数 0
我已经开始在ReactJS中学习上下文API的基本知识。
这是使用reactJS的reactJS代码的一部分。
app.js
import React from 'react';
import ReactDOM from 'react-dom';
import LeftPane from './LeftPane';
import RightPane from './RightPane';
import {SampleProvider} from './sample';
const App =()=>{
re
浏览 0提问于2018-07-13得票数 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
回答已采纳
我试图访问react路由器的Route元素的一个子元素的ref，但它不起作用。
<Route path={path} render={ () => (
<Child ref={ (el => this.$child = el)} />
)} />
控制台日志："Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail."
浏览 0提问于2017-11-17得票数 0
在我的React应用程序的根组件中，我有以下内容：
class App extends Component {
...
ComponentDidMount() {
window.addEventListener('resize', this.handleResize, false);
}
handleResize{
this.parentSize = {height: window.innerWidht - this.node.offsetLeft ..., width: ...};
this.forceUpdate();
}
ren
浏览 4提问于2017-08-11得票数 0
回答已采纳
1回答
这是一个有点模糊的问题，但让我尝试通过伪码。如果我在父对象中创建子对象数组：
class Parent extends React.Component {
constructor() {
this.state = {kids: [<Child/>,<Child/>]};
}
render () {
return <div>{this.state.kids[0]}{this.state.kids[1]}</div>
}
}
class Child extends React.Compo
浏览 3提问于2016-10-07得票数 0
1回答
我试图通过开发一个示例项目来学习自己的react/redux。我有一个angular.js &后端背景。
与其大量复制粘贴文件，我想分享我在github：上的进展。
我迄今取得的进展：
我开发了一个，和。
我开发了一个用户操作， (工作得很好)
我在Home组件的构造函数中使用，如下所示：
store.dispatch(userActions.getAuthenticatedUser())
我陷入困境的是，我不知道如何在路由器组件中访问存储数据(比如Home)。我只想在检索到的数据之后，将用户id传递给ProfileGroupsWidget。
浏览 2提问于2019-03-07得票数 0
回答已采纳
如何开始导出useState钩子？导出变量非常简单，但我不确定如何使用useState来完成。
import React, { useState } from "react";
export const Storage = () => {
[data, setData] = useState("")
}
如果我试图在某个地方导入存储并运行Storage.setData()，我得到一个"setData is not a function error.
浏览 16提问于2020-05-12得票数 0
1回答
我的应用程序由按省选择的过滤器组成，过滤器是在过滤器组件(子)中显示结果的模式，我想在父模式中显示结果，而不是在过滤器模式中显示结果。我不知道如何传递给父母以显示结果，也不知道如何在屏幕上显示结果。
/父组件
import React, { useState, useEffect } from 'react'
import { useDispatch } from "react-redux";
import { getClinic } from '../../api/drupalAPI'
import {Clinic} from '@ic
浏览 1提问于2022-09-02得票数 2
2回答
据我所知，在之后，自组织函数是一个接受组件并返回新组件的函数。这方面的一个例子是从react redux中连接的函数：
connect(mapStateToProps, mapDispatchToProps)(MyComponent)
我使用了来自React-virtualized的React-virtualized，并在它的中找到了下一个定义
高级组件，它自动调整单个子组件的宽度和高度。
其文档中使用的语法示例是下一个示例：
ReactDOM.render(
<AutoSizer>
{({height, width}) => (
<Li
浏览 3提问于2020-03-02得票数 0
回答已采纳
1回答
我是新的反应本土，我正在开发我的最后一年的项目使用它。当试图获取子组件的值时，我面临一个问题。我用DateTimePicker制作了自己的组件(只显示日期)，然后在另一个屏幕上使用这个日期选择器。当使用选择器选择一个新值时，我希望将这个新值存储在父状态中。我在网上做了一些研究，发现我需要把数据从孩子那里传递给父母。我试过这样做，但现在我得到了以下错误：
[Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_this.props.onSelectDate')]
您可以在下
浏览 3提问于2021-04-13得票数 0
回答已采纳
1回答
我有我所说的父组件。这是一种模式。我试图从一个子组件(即ShippingBlock )中更新一个变量。我正在尝试更新shippingMethod。
import React from 'react';
import "./Checkout.scss"
import AddressBlock from './AddressBlock';
import PaymentBlock from './PaymentBlock';
import ShippingBlock from './ShippingBlock';
imp
浏览 3提问于2021-10-30得票数 0
回答已采纳
请告诉我why my header render every time already use React.memo ?，当我从my apps到user header的导航时，我有两部分my app and user，为什么？
这是我的密码
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
const Header = React.memo(function() {
console.log("Head
浏览 2提问于2020-04-22得票数 3
回答已采纳
我开始尝试react路由器和动态匹配。我想创建一个函数，将URL的slug与JSON文件中的slug进行匹配。我得到的错误是: TypeError: Unable to get property 'slug‘of undefined or null reference
我认为url的'Slug‘是未定义的，但我不确定如何修复它。
我的routes.js代码：
import React from 'react';
import Header from './components/header/header.js';
import Home f
浏览 0提问于2018-02-25得票数 3
4回答
首先，我要指出，我不需要得到现成的解决办法。我只是需要一些指导如何正确地做这件事。
我有这样的父组件
import React from "react";
import Navbar from "./components/Navigation.js";
import Start from "./components/Start.js";
import Generator from "./components/Generator.js";
import Footer from "./components/Footer.js&
浏览 4提问于2020-12-28得票数 0
回答已采纳
我想测试一下，当模拟按钮单击时，是否调用了从mapDispatchToProps传递的函数。
如何测试从mapDispatchToProps传入的函数是否被调用？
我试图通过props传递一个模拟的函数，但它不起作用。任何帮助都将不胜感激。
下面是我的伪类代码和测试示例。
我的组件
// All required imports
class App extends React.Component<Props> {
render() {
const { onClick } = this.props;
return (
<>
浏览 10提问于2018-08-29得票数 8
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
