我试图从类外的高阶组件传递函数,因为我需要调用它,但它也需要传回。很难解释,这是代码:
包裹组件:
class foo extends React.Component {
....
}
foo.list = [
{
name: "Home",
action: this.props.funcFromHoc //this.props.from foo class, how can i access this because it is outside the component?
}
]
export default bar(foo);
高阶组件:
export default function bar(WrappedComponent) {
funcFromHoc() {
alert("Hello from HOC function!");
}
render() {
return (
<WrappedComponent
{ ...this.props }
funcFromHoc={ this.funcFromHoc }
);
}
}
我实际上在做什么:我有一个带有base screen (HOC)
的2 drawers
,它有一些控制它们行为的功能。我需要在many screens
上使用这两个抽屉,我不想在每个屏幕上放置抽屉的配置,这就是我为此创建一个HOC的原因。我的问题是,HOC抽屉上的list
在每个屏幕上都是dynamic
,而且我们在每个屏幕上设置了specific function
,我怎样才能将function
从screen component
传递到HOC?
我错过了什么或者这个吗?我做错了吗?我是否错过了一些高阶组件的正确使用方法?或者我应该用什么方法呢?任何提示或帮助将非常感谢。谢谢。
我找到了一个解决方案,它使用继承反转解决了我的问题。
class foo extends React.Component {
list() {
return [
{
name: "Home",
action: this.funcFromHoc //successfully accessed it here!
}
];
}
}
export default bar(foo);
(高阶组件):
export default function bar(WrappedComponent) {
return class Bar extends WrappedComponent {
funcFromHoc() {
alert("Hello from HOC function!");
}
render() {
return (
//call super.list() here to populate drawer list
{super.render()}
);
}
}
}
听起来您希望能够将其他参数传递给HOC。调用HOC时可以传递映射函数,如下面的颜色变量。请注意,HOC的定义也略有不同,以便采用其他参数。
编辑:nevermind,你将无法访问funcFromFoo,除非它是foo的支柱(即在mapDispatchToProps中定义)。嘿 - 我试过了。可能需要重新考虑设计,因此这不是必需的。
function doSomethingWithList(props) {
const { actionName, funcFromHOC, funcFromFooProps } = props;
if (actionName === 'Home') {
funcFromHOC();
} else {
funcFromFooProps();
}
};
const makeToggleable = (WrappedComponent, color) => {
return class ToggleableComponent extends React.Component {
constructor(props) {
super(props);
this.state = { toggled: false };
this.toggleColor = this.toggleColor.bind(this);
}
toggleColor() {
this.setState({ toggled: !this.state.toggled });
}
render() {
const fontColor = this.state.toggled? color: 'black';
return (
<WrappedComponent { ...this.props }
style={{color: fontColor}}
onClick={this.toggleColor} />
);
}
}
}
export default makeToggleable(BaseComponent, 'red');
const listItems = [ 'Home', 'Other' ];
export default bar(foo, listItems, doSomethingWithList);
传递listItems和doSomethingWithList为OP的问题,修改HOC以使用道具调用doSomethingWithList
来自https://spin.atomicobject.com/2017/03/02/higher-order-components-in-react/的示例代码