如何通过 HOC 传递父属性并正常使用它
How to pass parent props through a HOC and use it as normal
我学习了 React HOC,但不能理解一件事,
我有一个这样的 HOC:
const MyHoc = WrapperComponent => {
class TheHoc extends React.Component {
constructor(props) {
super(props);
this.someMethod = this.someMethod.bind(this);
}
someMethod = () => {
// ...do stuf
};
render() {
return <WrapperComponent doStuff={this.someMethod} {...this.props} />;
}
}
return TheHoc;
};
export default MyHoc;
当我这样使用的时候:
function HocUser(props) {
const { close, doStuff } = props;
const onClickMe = () => {
close();
doStuff();
};
return (
<div>
<MenuLinksSpace />
<MenuLinks>
<li>
<a onClick={onClickMe} role="presentation">
<span className="icon is-medium">
<i className="fas fa-user" />
</span>{' '}
Click me
</a>
</li>
</MenuLinks>
</div>
);
}
export default MyHoc(HocUser);
我的问题是 close
现在未定义,当它应该是从 HocUser
.[=18 的父级传递的函数时会出错=]
我的 HOC 做错了,因为 close
道具丢失了
请指教?
更新
这是使用 HocUser
的组件:像这样 <HocUser close={close} />
import React, { useRef, useCallback, useEffect } from 'react';
import styled from 'styled-components';
import { useSpring, animated } from 'react-spring';
import useOnClickOutside from './UseOnClickOutside';
import NavLinkPage from './NavLinkPage';
import HocUser from './HocUser';
const CollapseMenu = props => {
const { show, close } = props;
const { open } = useSpring({ open: show ? 0 : 1 });
const reference = useRef();
useOnClickOutside(reference, close, 'burgerMenu');
const escFunction = useCallback(
event => {
// only accept 27 if it's visible
if (event.keyCode === 27 && show === true) {
close();
}
},
[close, show],
);
useEffect(() => {
document.addEventListener('keydown', escFunction, false);
return () => {
document.removeEventListener('keydown', escFunction, false);
};
}, [escFunction]);
if (show === true) {
return (
<CollapseWrapper
ref={reference}
style={{
transform: open
.interpolate({
range: [0, 0.2, 0.3, 1],
output: [0, -20, 0, -200],
})
.interpolate(openValue => `translate3d(0, ${openValue}px, 0`),
}}
>
<NavLinkPage />
<HocUser close={close} />
</CollapseWrapper>
);
}
return null;
};
export default CollapseMenu;
const CollapseWrapper = styled(animated.div)`
position: fixed;
left: 0;
right: 0;
height: 100%;
width: 100%;
z-index: 100;
`;
我已经试过了,这对我来说效果很好,你可以在这里看到工作示例...
试试这个
const MyHoc = WrapperComponent => {
const someMethod = () => {
// ...do stuf
};
return (props) => {
return <WrapperComponent doStuff={someMethod} {...props} />;
};
};
export default MyHoc;
在HocUser内部检查close是否存在,然后调用close函数。如果关闭不是从父级传递的怎么办,你也应该处理这种情况。
const onClickMe = () => {
if(close) close();
doStuff();
};
你可以查看我的 HOC 示例 here connect 是 HOC。
我学习了 React HOC,但不能理解一件事,
我有一个这样的 HOC:
const MyHoc = WrapperComponent => {
class TheHoc extends React.Component {
constructor(props) {
super(props);
this.someMethod = this.someMethod.bind(this);
}
someMethod = () => {
// ...do stuf
};
render() {
return <WrapperComponent doStuff={this.someMethod} {...this.props} />;
}
}
return TheHoc;
};
export default MyHoc;
当我这样使用的时候:
function HocUser(props) {
const { close, doStuff } = props;
const onClickMe = () => {
close();
doStuff();
};
return (
<div>
<MenuLinksSpace />
<MenuLinks>
<li>
<a onClick={onClickMe} role="presentation">
<span className="icon is-medium">
<i className="fas fa-user" />
</span>{' '}
Click me
</a>
</li>
</MenuLinks>
</div>
);
}
export default MyHoc(HocUser);
我的问题是 close
现在未定义,当它应该是从 HocUser
.[=18 的父级传递的函数时会出错=]
我的 HOC 做错了,因为 close
道具丢失了
请指教?
更新
这是使用 HocUser
的组件:像这样 <HocUser close={close} />
import React, { useRef, useCallback, useEffect } from 'react';
import styled from 'styled-components';
import { useSpring, animated } from 'react-spring';
import useOnClickOutside from './UseOnClickOutside';
import NavLinkPage from './NavLinkPage';
import HocUser from './HocUser';
const CollapseMenu = props => {
const { show, close } = props;
const { open } = useSpring({ open: show ? 0 : 1 });
const reference = useRef();
useOnClickOutside(reference, close, 'burgerMenu');
const escFunction = useCallback(
event => {
// only accept 27 if it's visible
if (event.keyCode === 27 && show === true) {
close();
}
},
[close, show],
);
useEffect(() => {
document.addEventListener('keydown', escFunction, false);
return () => {
document.removeEventListener('keydown', escFunction, false);
};
}, [escFunction]);
if (show === true) {
return (
<CollapseWrapper
ref={reference}
style={{
transform: open
.interpolate({
range: [0, 0.2, 0.3, 1],
output: [0, -20, 0, -200],
})
.interpolate(openValue => `translate3d(0, ${openValue}px, 0`),
}}
>
<NavLinkPage />
<HocUser close={close} />
</CollapseWrapper>
);
}
return null;
};
export default CollapseMenu;
const CollapseWrapper = styled(animated.div)`
position: fixed;
left: 0;
right: 0;
height: 100%;
width: 100%;
z-index: 100;
`;
我已经试过了,这对我来说效果很好,你可以在这里看到工作示例...
试试这个
const MyHoc = WrapperComponent => {
const someMethod = () => {
// ...do stuf
};
return (props) => {
return <WrapperComponent doStuff={someMethod} {...props} />;
};
};
export default MyHoc;
在HocUser内部检查close是否存在,然后调用close函数。如果关闭不是从父级传递的怎么办,你也应该处理这种情况。
const onClickMe = () => {
if(close) close();
doStuff();
};
你可以查看我的 HOC 示例 here connect 是 HOC。