Javascript 反应高阶组件初始道具

我正在创建一个玩家库，并希望反应流如下所示：

PlayerHOC->PlayerHOC->FooterContainer

我希望它朝这个方向发展的原因是

PlayerHOC

上有

playHoc

和

FooterContainer

需要访问的方法（即从道具）

我的代码：

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);

class FooterContainer扩展了React.Component{
render（）{
返回(
//...
);
}
}
类FooterPlayer扩展了React.Component{
构造函数（）{
超级（）；
此选项={
smoothPlayBar:false，
沉默的：是的，
//...
};
}
render（）{
返回(
);
}
};
export const playlyHoc=（WrappedComponent）=>类扩展React.Component{
建造师（道具）{
超级（道具）；
//为额外循环选项添加新的stateClass
this.stateClass=merge({
洗牌：“状态洗牌”，
循环播放列表：“状态循环播放列表”
}，this.props.stateClass）；
}
setPlaylist=（）=>{}
};
export const PlayerHOC=（WrappedComponent）=>类扩展React.Component{
建造师（道具）{
超级（道具）；
//从FooterPlayer和PlayHoc获得道具传递
}
播放=（）=>{}
暂停=（）=>{}
};
常量Player=PlayerHOC（playlyHoc（FooterContainer））；
导出默认连接（）（FooterPlayer）；

我还将道具从

FooterPlayer

传递到

PlayerHOC

，效果很好。但是，我还想将默认道具从

playlyHoc

传递到

PlayerHOC

，这些道具将永远不会更新，我不知道如何在保持此流的同时实现这一点

例如：

constplayer=playlyHoc（PlayerHOC（FooterContainer））这将允许我将初始道具从
playlhoc
和
FooterPlayer
传递到
PlayerHOC
，但这样我就无法通过道具访问
PlayerHOC
方法

如何做到这一点？
我会使用
constplayer=playHoc（PlayerHOC（FooterContainer））因为父组件无法从其子组件接收道具

看起来
playlyHoc
和
PlayerHOC
都是混音，因此它们应该继承正在包装的组件，而不是
React.component

为了能够对代码进行测试，我只对代码做了一点修改，但其关键思想是如何在混音中扩展
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);

请注意，装饰程序不是确定的，可能会有很大的变化。
好主意，但两种方法都返回未定义的结果。另外，
WrappedComponent（）
会引发错误。所以我不认为我可以这样做。我只是意识到，
WrappedComponent
是对类的引用，而不是它的实例，并且由于它依赖于原型继承，所以方法应该在
原型上可用。尝试新代码这也不起作用，而且似乎只是使用
Refs
的一种黑客方式，我试图避免使用
Refs
，最终有时间正确地尝试一下，希望这次能有所帮助：）这很有效，非常感谢。我刚发现这是我的。React说我们应该更喜欢构图而不是。我应该使用refs+composition吗？或者这对HOC的好吗？
@PlayerlistHOC
@PlayerHOC
class FooterContainer {

}