React 高阶组件初始道具

Question

我正在创建一个播放器库，并希望 React 流程如下所示：

PlayerHOC -> PlaylistHOC -> FooterContainer。

我希望它朝这个方向发展的原因是 PlayerHOC 具有 PlaylistHOC 和 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);

我还将道具从FooterPlayer 传递到PlayerHOC，效果很好。但是，我还想将永远不会更新的默认道具从 PlaylistHOC 传递到 PlayerHOC，我不知道如何在保持这种流动的同时做到这一点。

例如：const Player = PlaylistHOC(PlayerHOC(FooterContainer)); 这将允许我将初始道具从PlaylistHOC 和FooterPlayer 传递给PlayerHOC，但是我将无法通过道具访问PlayerHOC 方法。

我该怎么做？

Answer 1

我会使用const Player = PlaylistHOC(PlayerHOC(FooterContainer));，因为父组件无法从其子组件接收道具。

看起来PlaylistHOC 和PlayerHOC 都是mixin，所以它们应该从被包装的组件继承而不是React.Component。

我稍微更改了代码以便能够对其进行测试，但它的关键思想是我如何在你的 mixins 中扩展 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);

顺便说一句，试试decorators 一些非常花哨的语法，比如

@PlayerlistHOC
@PlayerHOC
class FooterContainer {

}

请注意，装饰器不是确定性的，可能会发生很大变化。