[英]Passing React context through an HOC to a wrapped component
Is there a way that you can pass context through a React higher order component to a the component it wraps? 有没有办法可以通过React高阶组件将上下文传递给它包装的组件?
I have a HOC that receives context from its parent and utilizes that context to perform a basic, generalized action and then wraps a child component that also needs to access that same context to perform actions. 我有一个HOC从其父级接收上下文,并利用该上下文执行基本的通用操作,然后包装一个也需要访问相同上下文以执行操作的子组件。 Examples:
例子:
HOC: HOC:
export default function withACoolThing(WrappedComponent) {
return class DoACoolThing extends Component {
static contextTypes = {
actions: PropTypes.object,
}
@autobind
doAThing() {
this.context.actions.doTheThing();
}
render() {
const newProps = {
doAThing: this.doAThing,
};
return (
<WrappedComponent {...this.props} {...newProps} {...this.context} />
);
}
}
};
Wrapped Component: 包裹组件:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { autobind } from 'core-decorators';
import withACoolThing from 'lib/hocs/withACoolThing';
const propTypes = {
doAThing: PropTypes.func,
};
const contextTypes = {
actions: PropTypes.object,
};
@withACoolThing
export default class SomeComponent extends PureComponent {
@autobind
doSomethingSpecificToThisComponent(someData) {
this.context.actions.doSomethingSpecificToThisComponent();
}
render() {
const { actions } = this.context;
return (
<div styleName="SomeComponent">
<SomeOtherThing onClick={() => this.doSomethingSpecificToThisComponent(someData)}>Do a Specific Thing</SomeOtherThing>
<SomeOtherThing onClick={() => this.props.doAThing()}>Do a General Thing</SomeOtherThing>
</div>
);
}
}
SomeComponent.propTypes = propTypes;
SomeComponent.contextTypes = contextTypes;
Passing {...this.context}
in the HOC does not work. 在HOC中传递
{...this.context}
不起作用。 this.context
is an empty {}
as long as the wrapped component is wrapped by the HOC. 只要包装的组件被HOC包装,
this.context
就是一个空的{}
。 Please help? 请帮忙? Is there any way to pass down context that doesn't involve passing it as props??
有没有办法传递不涉及将其作为道具传递的上下文?
The Problem: 问题:
If contextTypes is not defined, then context will be an empty object.
如果未定义contextTypes,则上下文将是空对象。
The Solution: 解决方案:
Set WrappedComponent.contextTypes
inside the HOC. 设置
WrappedComponent.contextTypes
的HOC 内 。
Explanation: 说明:
In the unfixed code, contextTypes
for SomeComponent
isn't being set. 在未
SomeComponent
代码中,未设置SomeComponent
contextTypes
。 When SomeComponent
gets decorated by @withACoolThing
, any changes you make to SomeComponent
are actually happening to DoACoolThing
, and contextTypes
for SomeComponent
never gets set so it ends up being an empty object {}
. 当
SomeComponent
被@withACoolThing
,您对SomeComponent
任何更改实际上都发生在DoACoolThing
,并且SomeComponent
contextTypes
永远不会被设置,因此它最终成为一个空对象{}
。
Side Note: 边注:
Because you are expanding this.context
in the HOC and passing it down as props here: 因为您正在HOC中扩展
this.context
并将其作为道具传递到此处:
<WrappedComponent {...this.props} {...newProps} {...this.context} />
You should have things like this.props.actions.doTheThing
available in the child component. 您应该在子组件中使用
this.props.actions.doTheThing
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.