传递给react组件子级的函数不会收到函数上下文
传递给React组件子级的函数不会收到函数上下文是因为React组件的函数传递是通过props进行的，而不是通过函数上下文。函数上下文是指函数在执行时所处的环境，包括变量、作用域和this指向等。在React中，父组件可以通过props将函数传递给子组件，子组件可以通过props接收并调用该函数，但是子组件无法获取到父组件函数的上下文。
这种设计有助于组件的解耦和复用。父组件可以将自己的函数作为props传递给子组件，子组件可以根据需要调用该函数，而不需要关心函数的具体实现和上下文。这样可以提高组件的灵活性和可维护性。
对于React组件子级函数不收到函数上下文的问题，可以通过以下方式解决：
- 使用箭头函数：在父组件中将箭头函数作为props传递给子组件，箭头函数会继承父组件的上下文，子组件可以通过props接收并调用该箭头函数。
- 使用bind方法：在父组件中使用bind方法将函数绑定到父组件的上下文，然后将绑定后的函数作为props传递给子组件，子组件可以通过props接收并调用该函数。
- 使用类组件：将函数转换为类组件的方法，类组件可以通过this关键字获取到父组件的上下文，子组件可以通过props接收并调用该函数。
需要注意的是，React组件的函数传递是单向的，即父组件可以将函数传递给子组件，但子组件无法直接将函数传递回父组件。如果需要在子组件中修改父组件的状态或调用父组件的方法，可以通过在父组件中定义回调函数，并将回调函数作为props传递给子组件，子组件可以在需要的时候调用该回调函数来实现与父组件的交互。
总结起来，传递给React组件子级的函数不会收到函数上下文，但可以通过箭头函数、bind方法或类组件来解决这个问题。这种设计有助于组件的解耦和复用，提高了组件的灵活性和可维护性。
相关·内容
我遵循一个带有Hooks在线课程的Advanced模式，在这个早期的例子中，他们用以下API创建了一个可扩展组件(比如经典的手风琴或可折叠面板)：
<Expandable>
<Expandable.Header>This is the header</Expandable.Header>
<Expandable.Body>This is the content</Expandable.Body>
</Expandable>
他们使用上下文将州expanded传递给可扩展的孩子。到目前为止还不错：
impor
浏览 1提问于2020-09-03得票数 3
回答已采纳
1回答
在下面的React组件中，我使用获取了更多的条目。
在这里使用的确切目的是什么？在这种情况下使用这个方法好吗？
const Carousel = ({ data: blockData, metadata }: Props) => {
const { data, fetchMore, networkStatus } = useQuery<
GqlRes,
>(GET_NODES, {
variables: {
offset
limit
},
errorPolicy: 'all',
notif
浏览 4提问于2021-12-17得票数 1
我有两个js文件，一个是app.js，另一个是foo.js。我想访问app.js在foo.js中的状态。
App.js
class App extends React.Component {
constructor(props) {
super(props);
this.state = {test:" None "};
}
function onChange(event) {
this.setState({
test: event.target.value,
});
}
render() {
retur
浏览 2提问于2019-05-03得票数 0
回答已采纳
父类有几个子组件，所有子类都在呈现方法中实例化，因此，对父状态的任何更改都会导致所有子实例重新实例化，每次调用react创建子实例的新实例，在那里通过子实例的松散状态，以便重用我尝试使用parent.refs.childRef检索子实例的子实例，但这给我带来了错误。
未明错误:对象作为一个React子对象无效。
，这是我的密码
placeHolderComponent(){
let component;
let palceHolderValue=this.state.uiState.placeHolder;
let classInstan
浏览 4提问于2016-12-02得票数 2
2回答
假设我有两个React组件Parent和Child，它们都是由Mobx管理的某种状态的@observer。如果子组件在其render方法之外使用了一个observable值，那么父组件的Mobx autorun是否会跟踪该值/observable
谢谢
浏览 3提问于2017-03-22得票数 1
1回答
我有两个组件子组件和父组件，这个子组件的角色是星等评级，现在我想从子组件中获取要在父组件中显示的值，并使用来自子组件的数据。
添加:我使用Redux并响应导航2.0
子组件
import React, { Component } from 'react';
//import react in our code.
import {
StyleSheet,
View,
Platform,
Text,
Image,
TouchableOpacity,
} from 'react-native';
class Rate extends Co
浏览 0提问于2019-06-14得票数 2
据我所知，如果没有实现shouldcomponentUpdate()，react会调用render()方法。
get 当您的组件最初被挂载时，使用this.setState()when更改状态时，您的组件将收到新的propswhen this.forceUpdate()。
还有其他我遗漏的场景吗？
浏览 47提问于2018-05-28得票数 4
回答已采纳
假设我有这样的例子：
import React, { useMemo, useCallback } from 'react'
const Hello = (props) => {
const { firstName, lastName } = props
const fullName = useMemo(() => `${firstName} ${lastName}`, [firstName, lastName])
const sayHello = useCallback(() => {
console.log(`Hello, ${fu
浏览 3提问于2020-11-26得票数 2
回答已采纳
1回答
我正在使用react useContext钩子并试图更新它的值。
背景如下：
import React from 'react';
const TokenContext = React.createContext({
token: null,
setToken: () => {}
});
export default TokenContext;
和NotFound.js
import React, { useContext, useEffect } from 'react';
import TokenContext from '
浏览 2提问于2020-06-09得票数 1
回答已采纳
我是新来的。
我需要改变点击按钮的整个视图。
为此，我需要从子组件中更新父组件的状态。
就像我们做的会话变量一样。你们知道吗那就帮帮我吧。
提前谢谢。
这是我的密码：
App.jsx
class App extends React.Component {
constructor(props) {
super(props)
}
render() {
let RedirectTo = this.state.page;
let RenderPage;
switch (RedirectTo) {
case 'component':
浏览 6提问于2017-05-03得票数 0
回答已采纳
我正在尝试使用上下文在React中的两个组件之间传递数据。我想要传递的数据是一个数组searchResults。我已经设置了上下文和所有东西，但是当我尝试在我的第二个组件中使用数组时，我得到了Cannot read property 'map' of undefined，我如何使用我通过上下文发送的第二个组件中的数组呢？
这是我的第一个组件：
import React, { Component } from "react";
import axios from "axios";
export const SearchContext = React
浏览 3提问于2020-05-30得票数 3
我希望传递布尔状态以将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
回答已采纳
我才刚开始学习反应。如果我有一个带有两个变量的组件，那么在另一个组件中访问这些组件的最简单方法是什么？用道具，useState，useContext？如何在ComponentTwo中使用这两个变量。
import React from 'react';
ComponentOne = () => {
varOne = Mike;
varTwo = Tyson;
Return(
<div>
</div>
)}
export default ComponentOne
import React from 'react';
impo
浏览 6提问于2021-12-14得票数 2
回答已采纳
我有一个有状态GrandParent呈现ParentOne或ParentTwo的设计，但是双亲都呈现相同的有状态Child组件。当父组件被更改时，我希望保留Child的状态(以及它可能有状态的子元素)。
我创建了一个很小的代码库来展示我的意思，我还将包括JavaScript，以备将来参考，以防它消失：
function Child() {
const [myState, setMyState] = React.useState(false);
return (
<div>
<p>Is state modified: {myState.to
浏览 10提问于2022-09-16得票数 0
2回答
我在代码中使用了2 useState。当第二次useSate状态为真时，我希望第一次useState状态为假。
我可以使用类组件来实现它，而不是通过功能组件。
类组件代码
class App extends React.Component {
state = { visible: false, childrenDrawer: false };
showDrawer = () => {
this.setState({
visible: true,
});
};
onClose = () => {
this.setState({
visible: false,
});
浏览 2提问于2020-10-09得票数 0
我正在尝试对Profile组件进行单元测试，该组件包含一个userParams()调用，以便从path变量获取userID，以配置文件格式显示该用户的信息。
测试使用MemoryRouter来使用正确的参数路由到测试，我不确定为什么它返回不能找到“角色”标题，因为在JSX组件中有两个标题元素，在默认情况下应该被赋予角色‘标题’。
我不确定测试是否配置正确，或者是否有其他原因。
在以下方面失败：
Unable to find role="heading"
Ignored nodes: comments, <script />, <style />
<
浏览 24提问于2022-08-06得票数 2
它不是官方的API (!)，但是context在反应混合中非常有用。然而，对我来说，它的行为和内容并不完全是直观的。
this.context的内容从何而来？
(撰写本文时，React位于0.12版)
更新：好久过去了！上下文已经成为官方的React已有一段时间了。我是。
浏览 3提问于2014-11-27得票数 15
回答已采纳
我对react是个新手。我正在尝试让父级根据状态更改显示的页面。我在我的子组件中有一个按钮，它应该向父组件发送"true“或"false”，以便它知道是否呈现它。我认为应该用这样的道具来完成：
this.state = {
btnNewScreen: this.props.btnNewScreen //true or false
};
但是我不能让它工作。你能给点建议吗？这是完整的父子
父级- maindisplay.js
import React from 'react';
import Mainpage_Addscreen from '../c
浏览 0提问于2016-08-11得票数 9
回答已采纳
1回答
我有两个组件，一个父函数组件和一个子类组件。我正在从父函数组件中的子类组件调用一个函数。下面是我尝试过的内容和我得到的错误信息。我想我错过了一些小的东西，但不知道它是什么会感谢任何帮助。
TypeError:未定义不是对象(计算'childRef.current.setModalOpen')
父功能部分：
import React, { useRef } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createSt
浏览 0提问于2021-03-24得票数 0
1回答
在这里，我想将道具设置为在子组件中的状态。我有一个满是ajax请求的表。顺便说一下，我正在使用库。我的表上有一个编辑按钮，它应该打开一个包含表单的模式。
父组件
import React, {Component} from 'react';
import axios from 'axios';
import API from '../../Helpers/Api'
import {Table, Divider, Tag, message, Popconfirm, Icon} from 'antd';
import {
Ca
浏览 2提问于2019-08-18得票数 0
回答已采纳
我是一个新的反应，我想知道如何才能改变风格的div与id“父母”，而点击的div与id“孩子”。
<div id="parent"></div>
#parent{display:block;}
var Products=React:createClass({
showHide: function(){
// change style of parent id's "display:block" to "display:none"
},
render: function()
浏览 6提问于2018-11-05得票数 3
2回答
将值从子传递到父级
、、、
我已经构建了一个组件，它使用react下拉区域上传文件。在我的父组件中，我想将这些文件发送到服务器。我的代码如下所示：
儿童部分：
const UploadMultipleImages = () => {
const [files, setFiles] = useState([]);
const { getRootProps, getInputProps } = useDropzone({
accept: {
"image/*": [],
},
onDrop: (acceptedFiles) => {
set
浏览 19提问于2022-10-18得票数 0
在React中，我们正在加载一个定义自己ID的子组件列表。然后，我们要执行一次传递，根据子组件设置的内部ID重新排列它们。如何将内部ID传递给父程序？另外，使用ID作为父级呈现密钥也是很好的。注意，内部ID与组件名称不匹配。
class Thing1 extends React.Component {
const ID = 'Thing1IDString';
}
class Thing2 extends React.Component {
const ID = 'Thing2IDString';
}
<Parent>
<Th
浏览 5提问于2017-03-02得票数 1
回答已采纳
我试图理解，它描述了如何使用react的上下文API来管理应用程序级的状态。对于一个简单的应用程序(在本例中是一个基本计数器应用程序)，它使用以下解决方案：
const CountContext = React.createContext()
function CountProvider(props) {
const [count, setCount] = React.useState(0)
const value = React.useMemo(() => [count, setCount], [count])
return <CountContext.Provid
浏览 6提问于2020-06-06得票数 34
回答已采纳
2回答
编辑:也许这可以作为上下文订阅服务器？引用。
我甚至不确定这是否是我想要实现的正确概念。我希望能够创建一个执行脏工作的组件，并将上下文附加到可以使用的组件上。
我试图在没有运气的情况下找到类似的东西，这让我相信我没有考虑到我正在做的事情的正确的字面背景.
我试过这样的方法：
import React, { Component } from "react";
export const Context = React.createContext();
export class ContextProvider extends Component {
state = {
sc
浏览 0提问于2018-11-20得票数 1
我正在优化应用程序的性能，我想知道是否对那些不依赖于任何变量的函数使用useCallback钩子。
考虑以下情况:假设我们有一些功能：
const someFunc = () => {
let someVar = "someVal";
/**
* here some extra calculations and statements regarding 'someVar'.
* none of the statements depends on a variable outside this function scope.
*/
浏览 3提问于2020-06-10得票数 10
回答已采纳
4回答
我正在学习react，我有一些代码等待在按钮上悬停，然后在悬停的图像上应用一个不透明的白色覆盖(这是可行的)：
class Product extends Component {
constructor(props) {
super(props);
// 1. bind your functions in the constructor.
this.mouseOver = this.mouseOver.bind(this);
this.mouseOut = this.mouseOut.bind(this);
t
浏览 3提问于2017-04-19得票数 4
回答已采纳
2回答
我有一个数组，我想保存在我的数据库中。我有一个页面(父组件)和一个表单(子组件)，其中我的生日输入是(我在数据库中保存的)。select html元素位于子组件中，每次更改后，我都会获取它们的值。现在，我需要将接收到的值从select元素传递回我的父组件，并使用接收到的道具更新数组。我将尽可能地重新创建我的代码：
AuthenticationPage.js (父母)：
import React from 'react';
class AuthenticationPage extends Component {
constructor(props) {
浏览 0提问于2020-04-26得票数 1
DataContext.js export const DataContext = createContext()
const DataContext = ({ children }) => {
const [userValue, setUserValue] = useState()
const [user, setUser] = useState()
const fetch = useCallback(async () => {
const response = await axios(Url)
setBalance(re
浏览 17提问于2021-02-03得票数 0
1回答
我不是在上课，我想学习如何手动操作。我正在处理登录屏幕。如果你想给我看你的代码，你需要保存和共享链接。所以我想要一个用于显示textbox的函数组件(假设ChildComponent是函数名，所以是export ChildComponent)。
因此，在“家长/屏幕1”中，我有类似的东西，对吗？
import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'exp
浏览 4提问于2021-02-14得票数 2
回答已采纳
2回答
我的父组件
import EditReview from './partials/editReview'
class VenueDetails extends Component {
constructor(props) {
super(props)
this.child = React.createRef();
}
render() {
return (
<div className="place-review-text">
<EditReview {...this.props
浏览 1提问于2018-09-01得票数 0
回答已采纳
我试图设计一个React来操作库存数据库。为了将项目添加到库存中，我创建了一个功能组件ItemAddForm。
ItemAddForm (以及许多未来的功能组件)需要引用数组itemTypes。应该如何以及在何处声明itemTypes？我想避免将itemTypes作为一个支柱传递给每个组件，但是我不知道上下文是否可以用于数组？itemTypes应该是全局的，如果是的话，如何声明全局变量呢？
浏览 0提问于2019-08-14得票数 0
回答已采纳
1回答
我试图构建一个应用程序来帮助我学习反应。这是一个简单的应用程序，它将用户输入位置，从googles地理定位api中获取坐标，然后使用黑暗的skys api获取该位置的天气条件。
最初，我的所有应用程序逻辑都在一个容器中，您可以在这里看到
我想把我的逻辑分开一点，因为我觉得我的一个容器做了太多的事情。我希望我的应用程序结构如下。
App.js -持有状态，locationChangeHandler函数传递给LocationSearchContainer。
LocationSearchContainer -地理定位API并调用LocationSearch来显示搜索栏。
WeatherContain
浏览 1提问于2018-09-15得票数 0
回答已采纳
我对Js的反应是刚刚开始的，我对下面的场景非常困惑。在我的父组件中有一个名为availableShops的数组，我只是使用setState在子组件中更新它。我也希望在我的子组件中保留setState方法。
父级：
import React, { Component } from 'react';
import Child from './shop-with-price';
export default class Parent extends Component {
constructor(props) {
super(props);
浏览 2提问于2019-09-14得票数 0
1回答
我打算从我的app.js中移出逻辑。现在，在app.js中，我有一个函数可以更改App.js中某些变量的状态。我想了解通过让app.js调用另一个组件中的函数(例如单击)来改变app.js内部状态的正确方法。
我的app.js如下所示：
const App = () => {
const [opacity, opacitySet] = React.useState(1);
const [showStep, setDisplayStep] = React.useState(true);
const [isQrActive, setQrState] = React.u
浏览 0提问于2022-04-09得票数 0
回答已采纳
我使用redux在app中存储我的数据。我想知道如何将数据从状态传递给子组件的方法。我所知道的是，如果useContext创建了提供程序，并可以通过简单的方式提取数据，例如： const myData = React.useContext(MyContext); 但我不知道如何在redux中以一种有效的方式做到同样的技巧。我知道mapeStateToProps，但我希望有更简单的方法。看看我的代码： import React from 'react';
import { useDispatch, useSelector } from 'react-redux'
浏览 17提问于2020-11-06得票数 0
回答已采纳
我在使用React构建的一个小应用程序中遇到了一些问题，在该应用程序中，我创建了一个由根节点、子节点和孙节点组成的节点树。当我触发React Bootstrap模式的show函数时，我似乎无法获得访问子节点的正确id prop。
作为子节点渲染的一部分，我从父节点传入数据，然后填充一个模式，您可以从中编辑该子节点的名称。子节点代码如下：
import React, { Component } from 'react';
import "./Nodes.css"
import GrandchildNode from "./Grand
浏览 4提问于2019-02-13得票数 0
在React中，路由器1.0/2.0可以从路由组件以this.props.params的形式访问路由参数，但似乎没有支持从上面的路由组件中深入包含的组件访问params的方法。
可以通过context.location访问数据类型，但这一次会抛出一个警告，说明这是不推荐的。
浏览 2提问于2016-01-09得票数 4
回答已采纳
嗨，现在我在一个我的投资组合网站上工作，我试图使一个按钮，使用相同的风格，但想要使用它的两个按钮(1)转到一些页面(2)下载简历。但它们都执行操作(1)。我不知道如何让这两个按钮做不同的工作。
这是Button的代码，
import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';
const STYLES =['btn--primary', 'btn--outline'];
const SIZE
浏览 2提问于2021-03-11得票数 0
3回答
如何从文件中提取useState。为了进一步的工作，必须准确地导出sliderCount。提前谢谢。
有两个文件。第一个文件使用useState函数，并在单击按钮时更改状态。在第二个文件中，我希望从第一个文件获取更改后的useState状态，并继续使用它。
订立条件等，例如：
if(sliderCount == 1){
console.log('Number 1')
}
if(sliderCount == 2){
console.log('Number 2')
}
第一个文件：
import React, {useState} from
浏览 10提问于2022-09-16得票数 0
1回答
我创建了一个自定义的react钩子，允许用户切换我的应用程序的颜色主题(即“光”或“暗”)，并且状态变化不会导致调用钩子的组件重新呈现。
这个钩子名为useColorTheme，定义如下：
import { useEffect } from "react";
import useLocalStorage from "./useLocalStorage";
export default function useColorTheme() {
const [colorTheme, setColorTheme] = useLocalStorage("col
浏览 10提问于2022-11-24得票数 0
我有一个无状态的函数组件<Sidebar/>，它只是在div中返回它的子组件。这个组件是由<App/>呈现的，它维护自己的状态，并将该状态的一个元素传递到它的一个子级中。
const Sidebar = React.memo(({children}) => {
return <div className='sidebar'>{children}</div>
})
const App = (props) => {
const [counter, setCounter] = useState(0);
setI
浏览 1提问于2020-05-26得票数 3
新来的。
我一直在寻找答案，和。
我也在使用Redux。根据良好实践，我有一个容器"AddressContainer“及其组件"Address”。
AddressContainer的内容如下-
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { Field, change } from 'redux-form'
import { Col,
浏览 3提问于2017-06-10得票数 0
回答已采纳
1回答
我正在创建一个react应用程序，在我的组件中，我有一些根组件，它呈现所有的子组件，这些子组件自己处理状态。
我有一些情况，一些兄弟组件需要从其他组件获取数据，我最初的直觉是使用根组件进行协商，但然后根组件可能是巨型/整体式组件。
有什么方法可以改善这一点吗？或者我需要使用flux架构吗？
浏览 1提问于2016-09-13得票数 0
我正在制作购物卡项目，我决定使用Contextapi和useReducer作为我的状态管理，在我的项目开始时，我在上下文中包装了应用程序，它使我的应用程序崩溃，这是代码。
主要指数*
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import Context from "./Context";
Re
浏览 0提问于2022-03-18得票数 0
1回答
我正在为我的游戏应用程序使用react，我创建了一个GameContext.js
import React, { useState, createContext } from 'react';
const GameContext = createContext();
const GameProvider = ({ children }) => {
const [startgame, setStartgame] = useState(false);
return (
<GameContext.Provider value={[startgame,
浏览 1提问于2020-03-27得票数 1
回答已采纳
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
我有一个父组件A，其中设置了state和useState。父程序有两个子组件--组件B (接收useState作为支柱)和组件C (接收state作为支柱)。
因此，如果B运行setState，那么C应该重新呈现.一切都很好。我遇到的问题是，B也在重新呈现，尽管它没有将state作为一个支柱。理想情况下，我只希望C重新呈现。
另外，我不想将以前的state与当前的state进行比较，因为如果它是一个具有大量数据的重嵌套数组或对象，那么性能就会受到很大的影响。
有办法做到这一点吗？还是我必须使用类似于上下文API的东西呢？
代码示例：
// App.jsx - A
const App = ()
浏览 3提问于2020-07-15得票数 0
我有一个使用useReducer的自定义钩子，它控制在仪表板上呈现哪些组件。它在父组件中按预期工作，但当我在子组件中使用它时，useReducer会运行，状态会更改，但在父组件中不会更改，因此不会重新呈现相应的更改。我正在使用reducer中的扩展操作符来返回一个新对象。我尝试过在钩子中使用额外的useStates和useEffects，但都没有效果。我尝试了不同级别的解构，也没有效果。我可以看到状态正在改变，但在父对象中返回时，它似乎没有被识别为新对象。 自定义挂钩 import { useReducer } from "react"
let dashboard = {}
浏览 25提问于2020-03-28得票数 0
回答已采纳
这是我的上下文创建器，我在其中设置了上下文的初始状态，但我还必须传递项目中的useContext要使用的函数。我传递了函数this way.can，有人告诉我更好的方法来做到这一点。附言:这种方法工作得很好，但我认为它会给大项目带来问题
import { createContext } from "react"
import { initialState } from "./Initstate"
import { IInitState } from "./alert/IInitState"
export interface IGithubCon
浏览 0提问于2020-06-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
