[英]React Higher Order Component Initial Props
I am creating a player library and want the React flow to go like this:我正在创建一个播放器库,并希望 React 流程像这样:
PlayerHOC -> PlaylistHOC -> FooterContainer
. PlayerHOC -> PlaylistHOC -> FooterContainer
。
The reason I want it to go in this direction is that PlayerHOC
has methods on it that PlaylistHOC
and FooterContainer
need to access (ie from props).我希望它朝这个方向发展的原因是
PlayerHOC
有PlaylistHOC
和FooterContainer
需要访问的方法(即从道具)。
My code:我的代码:
class FooterContainer extends React.Component {
render() {
return (
<div>
<div className="jp-type-footer" >
//...
</div>
</div>
);
}
}
class FooterPlayer extends React.Component {
constructor() {
super();
this.options = {
smoothPlayBar: false,
muted: true,
//...
};
}
render() {
return (
<Player {...this.options} />
);
}
};
export const PlaylistHOC = (WrappedComponent) => class extends React.Component {
constructor(props) {
super(props);
//Add a new stateClass for the extra loop option
this.stateClass = merge({
shuffled: "state-shuffled",
loopedPlaylist: "state-loop-playlist"
}, this.props.stateClass);
}
setPlaylist = () => {}
};
export const PlayerHOC = (WrappedComponent) => class extends React.Component {
constructor(props) {
super(props);
//get passed in props from FooterPlayer and PlaylistHoc
}
play = () => {}
pause = () => {}
};
const Player = PlayerHOC(PlaylistHOC(FooterContainer));
export default connect()(FooterPlayer);
I also pass in props from FooterPlayer
to PlayerHOC
which works fine.我还将道具从
FooterPlayer
给PlayerHOC
,效果很好。 However, I also want to pass in default props from PlaylistHOC
to PlayerHOC
that will never be updated and I can't figure out how to this while also keeping this flow.但是,我也想将默认道具从
PlaylistHOC
PlayerHOC
到永远不会更新的PlayerHOC
,我无法弄清楚如何做到这一点,同时也保持这种流程。
For example: const Player = PlaylistHOC(PlayerHOC(FooterContainer));
例如:
const Player = PlaylistHOC(PlayerHOC(FooterContainer));
this would allow me to pass in initial props from PlaylistHOC
and FooterPlayer
to PlayerHOC
but then I would not be able to access PlayerHOC
methods by props.这将允许我将初始道具从
PlaylistHOC
和FooterPlayer
到PlayerHOC
但随后我将无法通过道具访问PlayerHOC
方法。
How do I do this?我该怎么做呢?
I would use const Player = PlaylistHOC(PlayerHOC(FooterContainer));
我会使用
const Player = PlaylistHOC(PlayerHOC(FooterContainer));
because a parent component can't receive props from it's children.因为父组件无法从其子组件接收道具。
Looks like both PlaylistHOC
and PlayerHOC
are mixins, so they should inherit from the component being wrapped instead of React.Component
.看起来
PlaylistHOC
和PlayerHOC
都是 mixin,所以它们应该从被包装的组件而不是React.Component
。
I've changed a code just a little bit to be able to test it, but the key idea of it is how I've extended WrappedComponent
instead of React.Component
in your mixins.为了能够测试它,我对代码做了一点改动,但它的关键思想是我如何在你的 mixin 中扩展
WrappedComponent
而不是React.Component
。
class FooterContainer extends React.Component {
render() {
return (
<div>
<div className="jp-type-footer">
<button onClick={this.play.bind(this)}>Play</button>
</div>
</div>
);
}
}
class FooterPlayer extends React.Component {
constructor() {
super();
this.options = {
smoothPlayBar: false,
muted: true
//...
};
}
render() {
return (
<Player {...this.options} />
);
}
};
export const PlaylistHOC = (WrappedComponent) => class extends WrappedComponent {
constructor(props) {
super(props);
//Add a new stateClass for the extra loop option
//this.stateClass = merge({
// shuffled: "state-shuffled",
// loopedPlaylist: "state-loop-playlist"
//}, this.props.stateClass);
}
setPlaylist() {
}
};
export const PlayerHOC = (WrappedComponent) => class extends WrappedComponent {
constructor(props) {
super(props);
//get passed in props from FooterPlayer and PlaylistHoc
}
play() {
console.log('playing');
}
pause() {
}
};
const Player = PlaylistHOC(PlayerHOC(FooterContainer));
export default connect()(FooterPlayer);
By the way, try decorators for some really fancy syntax like顺便说一句,尝试使用装饰器来获得一些非常花哨的语法,例如
@PlayerlistHOC
@PlayerHOC
class FooterContainer {
}
Be warned decorators are not definitive and might change a lot.请注意,装饰器不是确定的,可能会发生很大变化。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.