如何在React上下文中传递props和使用HOC
在React中，可以使用上下文（Context）来传递props和使用高阶组件（Higher-Order Component，HOC）。
- 传递props：
- 上下文（Context）是React提供的一种跨组件传递数据的机制。通过创建上下文对象，可以在组件树中的任何地方访问该上下文的值。
- 首先，使用React.createContext()方法创建一个上下文对象。例如：
- 首先，使用React.createContext()方法创建一个上下文对象。例如：
- 然后，在提供上下文的组件中，使用<MyContext.Provider>包裹需要传递props的子组件，并通过value属性传递数据。例如：
- 然后，在提供上下文的组件中，使用<MyContext.Provider>包裹需要传递props的子组件，并通过value属性传递数据。例如：
- 在接收上下文的组件中，可以使用<MyContext.Consumer>来访问上下文的值，并将其作为函数的参数。例如：
- 在接收上下文的组件中，可以使用<MyContext.Consumer>来访问上下文的值，并将其作为函数的参数。例如：
- 注意：为了方便使用上下文，可以使用React的新特性——钩子（Hooks），使用useContext钩子来访问上下文的值。例如：
- 注意：为了方便使用上下文，可以使用React的新特性——钩子（Hooks），使用useContext钩子来访问上下文的值。例如：
- 使用HOC：
- 高阶组件（Higher-Order Component，HOC）是一个函数，接收一个组件作为参数，并返回一个新的增强组件。
- 首先，定义一个高阶组件函数，接收一个组件作为参数，并返回一个新的组件。例如：
- 首先，定义一个高阶组件函数，接收一个组件作为参数，并返回一个新的组件。例如：
- 然后，使用高阶组件函数来包裹需要传递props的组件。例如：
- 然后，使用高阶组件函数来包裹需要传递props的组件。例如：
- 最后，使用EnhancedComponent作为组件的渲染结果。例如：
- 最后，使用EnhancedComponent作为组件的渲染结果。例如：
- 注意：高阶组件可以在包装组件的基础上进行更多的逻辑处理，例如添加额外的props、修改props等。
以上是在React上下文中传递props和使用高阶组件的方法。这些技术可以帮助我们在React应用中更灵活地传递和处理数据。腾讯云提供的相关产品和产品介绍链接地址请参考腾讯云官方文档。
相关·内容
考虑一个案件：
import { Provider } from 'mobx-react';
import usersStore from './stores/usersStore';
import itemsStore from './stores/itemsStore';
const stores = { usersStore, itemsStore };
ReactDOM.render(
<Provider {...stores}>
<SomeComponent />
</Provider&
浏览 2提问于2018-03-31得票数 1
回答已采纳
1回答
我有一个使用IdleTimer的即席组件。我正在创建一个空闲超时功能，以便在react，redux应用程序中的某个时间后注销用户。我很难把它传到我的其他路线上。实现这一目标的最佳方式是什么？
HOC (IdleTimer)
import IdleTimer from "react-idle-timer";
import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { Switch, Route } from 'react-rout
浏览 10提问于2020-02-11得票数 0
如果数据不可用，我已经创建了更高级的组件来呈现加载程序。名为Loader的组件是高阶组件。名为ContactList的组件调用高阶组件。我的ContactList组件代码：
import React, { Component } from 'react';
import '../App.css';
import Loader from './hoc/Loader.js';
class ContactList extends Component {
constructor(props) {
super(props);
this
浏览 0提问于2018-07-23得票数 3
1回答
我有一个要传递ref值的组件。我需要在高阶组件中获取传递的ref值。下面是代码示例: Component with HOC：
import React from "react";
import HOC from './hoc';
const MeasuredInput = () => {
const ref = React.createRef();
return (
<div>
<button ref={ref}>Click me!</button>
</div>
)
浏览 24提问于2020-02-19得票数 1
3回答
在React docs In HOC部分中，有一个示例 const CommentListWithSubscription = withSubscription(
CommentList,
(DataSource) => DataSource.getComments()
); 你能解释一下函数作用域是如何工作的吗？他们把第二个参数作为箭头函数，在这个箭头函数中，我们有DataSource参数并返回DataSource.getComments()的结果 HOC withSubscription的实现 function withSubscription(WrappedCompone
浏览 29提问于2020-06-28得票数 0
回答已采纳
我有代码
router.js
import React from 'react';
import {render} from "react-dom";
import history from './history';
import {Router, Route} from 'react-router'
import Main from "./main/component";
import Profile from "./profile/component";
import TextStatus f
浏览 0提问于2018-01-11得票数 3
回答已采纳
我正在尝试将道具从一个组件传递到另一个组件。不过，index属性在SortableSectionList中似乎并没有传递给SortableSection。参见下面的控制台输出。
Index in SortableSectionList: 0
Index in SortableSectionList: 1
(2) Index in SortableSection: undefined
不过，像menuSection这样的其他属性也能很好地通过。请参阅下面的完整代码。任何帮助都是感激的，谢谢！
import React from 'react'
import MenuSection
浏览 2提问于2017-08-25得票数 1
回答已采纳
我正在尝试使用ES6语法构建一个ReactJS高阶组件。这是我的尝试：
export const withContext = Component =>
class AppContextComponent extends React.Component {
render() {
return (
<AppContextLoader>
<AppContext.Consumer>
{context =&
浏览 1提问于2018-04-27得票数 1
嗨，我有一个道具和状态的接口：
interface IOffersProps
{
nextStep: () => void;
step: number
}
export default IOffersProps
interface IOffersState
{}
export default IOffersState;
我创建了一个特殊的方法，例如有一个myhocMethod方法，如下所示：
const addOffersLogic = <TProp extends IOffersProps, TState extends IOffersState>(C
浏览 0提问于2019-01-20得票数 1
在Mobx (mobx- React )中，我们可以在这样的React组件中“注入”存储：
@inject('store')
@observer class Abc extends React.Component {
}
这导致Abc将store作为类似于this.props.store的prop获得。但是inject如何将store映射到实际的商店呢？
浏览 0提问于2018-04-01得票数 1
回答已采纳
<TabPanel>
<Dietracker dataFromParent={date} />
<Link to="/cdiet">
<button onClick={this.closeTabBox}>edit</button>
</Link>
</TabPanel>
当单击编辑按钮时，我正在尝试将dataFromParent={date}传递给navigator.js中的<CDietOverview />，但没有更改路径
<Route path="
浏览 5提问于2021-09-24得票数 1
1回答
用酶和茉莉花检测高阶成分
、、、、
使用Jasmine和Enzyme进行测试，我一直在尝试测试一个连接到redux的HOC。以下面的HOC为例：
import React, { Component } from 'react';
import { connect } from 'react-redux';
const WithAreas = (WrappedComponent) => {
class WithAreasComponent extends Component {
constructor(props) {
super(props);
}
浏览 0提问于2018-06-30得票数 1
1回答
我有一个无状态功能组件，它没有道具，可以从React上下文中填充内容。作为参考，我的应用程序使用NextJS，是一个同构的应用程序。我第一次尝试在这个组件上使用React.memo()，但是它不断地在客户端页面上重新呈现，尽管道具和上下文没有改变。我知道这是因为我放置了一个控制台日志。
我的组件的一个简单示例是：
const Footer = React.memo(() => {
const globalSettings = useContext(GlobalSettingsContext);
console.log('Should only see this once&
浏览 0提问于2019-02-19得票数 12
回答已采纳
1回答
我正在尝试创建一个在React js中为图标组件中的参数"color“赋值的HOC。我有三种不同的颜色。它们如下所示: pimary是#f7a014二级是#dd8b08三元是#56t00
所以我可以这样做：
<MyComponent color='primary' />
下面是我的withColor HOC：
import React from 'react';
import propTypes from 'prop-types';
function mapColors(color) {
if (color ===
浏览 1提问于2018-08-22得票数 0
我有一个更高阶的组件，它使用React Router提供的location.search属性来构造一个queryParams对象，并将其作为属性传递给它的封装组件。
function withQueryParams(WrappedComponent) {
return (props) => {
const queryParams = myUtils.parseParams(props.location.search); // props.location provided by React Router
const newProps = {
浏览 25提问于2018-07-31得票数 2
回答已采纳
1回答
1- Provider
为什么我们需要将所有组件都包装在Provider中？
2- connect
connect是如何将redux存储作为props传递给组件的？
3-我们可以构建我们自己的Provider和connect吗？
下面是一个完整工作的简单React Redux示例，它只显示redux存储中的一个名称，并使用React Redux connect和Provider，那么ConnectedComponent如何简单地访问this.props.name呢？
import React, { Component } from "react";
import { rende
浏览 3提问于2018-01-12得票数 28
回答已采纳
我的react web应用程序有一个页面组件。页面组件为子组件执行异步调用。现在我不得不在每一页上
export default class Page extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true
}
}
componentWillMount = async () => {
// ... do calls
this.setState({
loading: false
浏览 2提问于2017-08-03得票数 1
回答已采纳
我的Formik如下所示：
<Formik
validationSchema={schema}
onSubmit={this.handleSubmit}
initialValues={this.state}
values={this.state}
onChange={this.handleChange}
>
{({
handleSubmit,
handleChange,
handleBlur,
values,
touched,
isValid,
errors
}) => (
.....
浏览 1提问于2020-01-23得票数 2
problem ->我创建了一个高阶组件(Hoc)(即withClass)。那么我就不会通过从index.js到app.js .like的属性来获取数据，我就不会在app.js中获取标题属性的值。
我哪里错了。
我得到这个问题后，只有特别的.before它是工作得很好。
//App.js
import React, { Component } from 'react';
import classes from './App.module.css';
import Persons from '../components/Persons/Per
浏览 0提问于2020-10-01得票数 0
我在上下文中有一个useEffect钩子。另外，我有两个函数组件，从其中一个调用类似于const context = useContext(ApiContext);的上下文，但同时，从同一个组件中也需要传递useEffect的依赖项，以便只有在依赖项发生变化时，useEffect代码才能执行，例如..“Name”和"Range“。下面是我的上下文代码
import React, { useState, useEffect } from 'react';
export const ApiContext = React.createContext();
const Co
浏览 1提问于2019-12-17得票数 0
回答已采纳
3回答
我正在阅读本教程：
他们有这样一种说法：
const withTodosNull = (Component) => (props) =>
!props.todos
? null
: <Component { ...props } />
据我所知，Component被传递给函数，然后它的props被隐式地获取并输入返回函数。我不明白React是如何做到这一点的。老实说，我期待的是类似(Component) => (Component.props)的东西。这是甚麽机制呢？只有当我们以props的形式提供参数或者我们可以提供任何名称时，它才能正确地
浏览 0提问于2019-03-28得票数 0
我有一个基本的下拉设置，如下所示：
(显然，在现实世界中，fetchValues()将转到服务器)：
import ReactDOM from "react-dom";
import React, { useState, useEffect } from "react";
const fetchValues = () => Promise.resolve(["option1", "option2"]);
function Dropdown(props) {
const [options, setOptions] =
浏览 0提问于2019-11-20得票数 1
我正在用React学习useContext。我希望将包含应用程序状态的单个对象传递给上下文使用者，例如：
<AppContextProvider.Provider value={AppState}>
{props.children}
</AppContextProvider.Provider>
当然，我需要传递一些getters和setters，以使子组件能够更新应用程序状态。
这种模式是一种有效的方法吗--有更好的模式吗？
const AppContext = React.createContext();
function AppContextProvider(
浏览 2提问于2019-02-24得票数 1
回答已采纳
2回答
我遇到了一个问题，无法防止未经授权的用户访问仅授权的路由/组件-例如登录的用户仪表板
我有以下代码：
import React from 'react'
//other imports
import {withRouter} from 'react-router'
class User extends React.Component {
constructor(props) {
super(props)
console.log('props', props)
let user = JSON.parse(localSt
浏览 0提问于2017-09-23得票数 2
回答已采纳
流程定义
declare type ReactComponent<Props> = Class<React$Component<void, Props, *>> | (props: Props) => React$Element<*>;
Title组件
/* @flow */
import React from 'react';
import Helmet from 'react-helmet';
import withStyles from 'isomorphic-style-loader/lib/
浏览 0提问于2017-05-12得票数 4
1回答
我想知道用户是否离开了页面
我试过：
componentWillMount() {
this.props.router.setRouteLeaveHook(
this.props.route,
this.routerWillLeave
)
},
但我明白：
this.props.router未定义
我看到了一些解决办法，但我不想用这种反应方式：
React.createClass
反应路由器的版本：
"react-dom": "^16.3.1",
"react-router-dom": "^4.2.2
浏览 1提问于2018-04-18得票数 1
我是个React新手，我正在试着造一个Pomodoro钟。我实际上被困在试图使按钮+和-更改我在我的状态上设置的数字。在我的主App组件中，我有：
class App extends React.Component{
constructor(props){
super(props)
this.state ={
breakValue: 5,
sessionValue: 25
}
现在，我尝试将更新数字的状态传递给SetTimer组件(它将处理这些按钮+和-)：所以我创建了这个函数来传递状态(这是一个处理+按钮的示例)：
handleUpdate
浏览 1提问于2019-10-15得票数 1
1回答
member-registration-form.tsx
import OrderList from "../components/orderList";
import { useForm, SubmitHandler } from "react-hook-form";
const MemberRegistration = () => {
const [values, setValues] = React.useState({
});
浏览 2提问于2021-11-19得票数 0
回答已采纳
1回答
用Formik回应备忘录
、、、
我有一个有很多表单字段的应用程序。我想要一种我可以避免重新渲染的方法。我正在使用Formik来管理这些表单。
我使用Formik的useField来访问子组件中的Formik表单值，因为React.memo只做了一个简单的比较。我想为备注方法编写一个自定义回调
function MainForm3() {
const initialValues = { txtArea: "" };
return (
<Formik initialValues={initialValues}>
{(formik) => {
retur
浏览 3提问于2020-08-11得票数 5
我已经看过几篇关于如何在hoc中使用flow的文章，但如果我不想通过所有的道具，我不知道该怎么做。 /* @flow */
import * as React from 'react';
type TComponent = {
pass: string,
inject: string
}
const TestComponent = ({pass, inject}: TComponent) => <span>{pass}{inject}</span>
type THocDiff = {
take: string
}
const H
浏览 13提问于2019-01-17得票数 1
回答已采纳
让我们在带有React和React Router的应用程序中使用这样的类。
@observer class Module1 extends React.Component {
constructor (props) {
super(props);
//...
}
componentWillMount(){
//...
}
method(){
//...
}
otherMethod(){
//...
}
render() {
return (
<ChildComp bars={thi
浏览 61提问于2016-03-08得票数 20
回答已采纳
我正在尝试在我的应用程序中构建一个简单的光照模式/黑暗模式--我在Material上看到了这个用于光/暗模式的例子，但是我不知道如果用户在我的头组件中设置了toggleColorMode，我如何才能访问它的值？
我想我的问题是，如果上下文在不同的函数中，我如何才能访问上下文的光明/黑暗模式的值？
这是我的密码。
import React, { useState, useEffect } from "react";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import DarkMode
浏览 7提问于2022-04-14得票数 0
回答已采纳
1回答
这是示例代码。如何在函数中传递类型global如何传递给单元组件的子代？ import * as React from "react";
const Context = React.createContext<any>(null);
function Cell(props: { children: (data: any) => string }) {
const data = React.useContext(Context);
return <div>{props.children(data.data)}</div>;
浏览 43提问于2020-08-16得票数 1
我有一个登录组件和一个App组件。App组件在上下文提供程序中包含Login组件。登录组件依次由withFormik高级组件包装以进行表单验证。当我试图在Login组件中使用useContext()钩子时，它无法使用错误进行编译：
./src/components/login/Login.jsx
第12行:在函数"useContext“中调用React”useContext“，该函数既不是React函数组件，也不是自定义React函数react/rules of hooks。
也试过了，但没能解决这个问题。:(
Login.jsx：
import React, { useContext
浏览 0提问于2019-06-07得票数 1
1回答
全新的反应，所以要警惕
我正在做的一天教程的捕捉，并在步骤中，您整合的路线，以重定向的网址按钮点击。我设置了教程中的内容：
var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var History = ReactRouter.History;
浏览 2提问于2016-08-19得票数 0
回答已采纳
我正在尝试将父对象的引用传递给它的子对象。子组件是一个功能组件，所以我正在做： // Child
const Configuration = forwardRef((props, ref) => {
const { colors } = useTheme();
const fall = useRef(new Animated.Value(1)).current;
return <></>
}); 一切都运行得很好。但当我试着做 export default withFirebase(Configuration); 问题出现了..。 这
浏览 34提问于2020-08-26得票数 3
回答已采纳
我在文件carousel.tsx中设置了一个useState钩子
export function Carousel({ children }) {
//Set Active State Carousel Item
const [active, setActive] = React.useState("default")
//Create Props for Carousel items
function makeProps(title) {
return {
title: title,
浏览 2提问于2020-05-16得票数 0
1回答
我做了一个简单的临时重新组合，但由于某些原因，它不适用于默认道具。如果我从外部提供的道具工作正常，但没有使用默认的道具(我得到'onCallback‘不是一个函数，所以基本上是一个未定义的错误)
我的专案：
import React from 'react'
import { withStateHandlers, withHandlers, compose } from 'recompose'
const editableRow = () =>
compose(
withStateHandlers(
浏览 0提问于2018-05-03得票数 1
回答已采纳
3回答
我正在尝试理解React的高阶组件结构，但是所有的资源都只是假设您已经了解了扩展操作符在编写时在高阶组件中所做的事情: BaseComponent {...this.props} {...this.state}。如果一个组件已经作为道具传递进来，为什么需要像这样展开道具呢？
import React, { Component } from 'react';
const EnhanceComponent = BaseComponent => {
return class EnhancedComponent extends Component {
s
浏览 0提问于2018-01-26得票数 7
回答已采纳
你好，我有一个挑战，我可以如何扩展和添加额外的道具到页面。下面的代码片段工作得很好，它填充了基本文本。
import React from 'react';
import { Text } from '@whatever-library';
const SomeComponent = (props) => (
<div>
<Text field={props.fields.heading} />
</div>
);
因此，现在我想添加来自外部API的数据，以便在这个组件中呈现。下面是另一个.js文件的片
浏览 1提问于2019-05-15得票数 0
问题
我用一个典型的特殊组件包装了一个组件，我在其他非TS项目中使用了一些格式。我的问题是，我不能在包装好的组件中使用特设的支柱currentBreakpoint，因为它希望它在组件的类型中：
Property 'currentBreakpoint' does not exist on type 'Readonly<OwnProps> & Readonly<{ children?: ReactNode; }>'. TS2339
然后导入特设的支持接口，并将其合并到组件自己的支柱接口中，然后我得到：
Property 'c
浏览 0提问于2019-06-10得票数 1
1回答
我真的被抓到了！我一直在尝试解决这个问题，但是没有结果！ 错误:类型'{ fieldHandler：(e: any) => void；getBrands: Function；brands: Brands[]；}‘缺少’BrandProps‘类型的以下属性: error，errorHandler，nav，navHandler TS2739 我有一个父组件将props传递给子组件，另一个更高阶的组件将额外的props传递给同一个子组件。 父组件返回 return (
<Fragment>
<Brands
fieldHandler
浏览 1111提问于2021-05-07得票数 1
回答已采纳
我不能使用compose withRouter和withAlert它只工作withRouter但是我不能使用compose..
它显示错误Unhandled Rejection (TypeError)：无法读取未定义属性‘success
import React from "react";
import Container from "@material-ui/core/Container";
import Typography from "@material-ui/core/Typography";
import Grid from "
浏览 5提问于2020-05-18得票数 1
回答已采纳
1回答
这是我的路由器的定义：
import BugsOverview from './BugsOverview';
import BugDetail from './BugDetail';
import './index.css';
import { Router, Route, browserHistory } from 'react-router'
ReactDOM.render(
<Router history={browserHistory}>
<Route path="/" co
浏览 11提问于2017-01-25得票数 1
回答已采纳
我试着翻遍所有的孩子并给它加上一个道具。问题是它适用于所有的直接子女，但“孙辈”如果愿意的话，也不会收到新的道具。下面是代码片段：
React.Children.map(this.props.children, child =>
React.createElement(
child.type,
Object.assign({}, {...child.props}, {newProp: "test"}),
)
)
所有的孩子都保留着他们的道具，以及增益prop.newProp和孙辈也被归还，但没有newProp。这样送孩子进来也是行不通的：
R
浏览 8提问于2016-06-10得票数 1
不能合并...state和函数返回的结果。
我正在尝试将类组件更改为函数组件。
所以我更新了react并使用了钩子。
首先，我想改变类的状态，setState来连接它们。
但是hook的setState替换了oject，而不是像类setState那样合并。
这是下面的原始代码
import React from 'react'
import produce from 'immer'
import {
getUserFromCookie,
login,
logout,
profile,
updateProfile
} from '../
浏览 1提问于2019-06-27得票数 1
3回答
我正在尝试创建一个更高阶的组件，但是不断地获得这个eslint。
组件定义缺少显示名称。
我尝试像下面这样添加一个显示名，但是它仍然在抱怨。
import React from 'react';
const HOC = props => (WC) => {
WC.displayName = 'test'
return (
<WC />
);
}
export default HOC;
浏览 1提问于2019-02-09得票数 14
回答已采纳
1回答
我在试验一些特殊的组件，但是它在浏览器中的呈现方式似乎有一些问题。特别守则是-
var HOC=(InnerComp)=> class extends React.Component{
render(){
return <InnerComp {...this.props} c="d"/>
}
};
问题是，当我使用自组织组件时，c="d“支柱在内部组件上是不可见的-
class MyTextArea extends React.Component{
render(){
return (
<text
浏览 0提问于2018-04-08得票数 1
回答已采纳
1回答
大家好，我想使用withAuth HOC来决定HomePage是作为仪表板还是以来宾homePage的形式呈现。此外，我希望将此逻辑与其他组件一起使用。但是每当我试图用map状态连接我的临时状态以支持它返回时，我就会陷入错误。
TypeError: Object(…)不是一个函数
img :-
。我看到了其他类似的stackOverflow解决方案--，但它们都无法清除我的错误。
我也尝试过使用compose，但是即使没有起作用，out.If，我也删除了连接，它的工作方式类似于charm.But，在我的特殊情况下，我需要redux状态。另外，我还想使用的钩子，但我现在只想保持简单
浏览 2提问于2020-04-11得票数 1
回答已采纳
2回答
假设我想在我的组件之前使用React 来转换我的道具的一个子集：
type UpstreamProps<X> = {
foo?: number
bar?: string
baz: X
}
type DownstreamProps<X> = {
foo: number
bar: string
baz: X
bix: string
}
function transform<X>(props: UpstreamProps<X>): DownstreamProps<X> {
浏览 22提问于2022-07-13得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
