javascript - React 高阶组件初始 Prop

Question

我正在创建一个播放器库，并希望 React 流程像这样:

PlayerHOC -> PlaylistHOC -> FooterContainer。

我希望它朝这个方向发展的原因是 PlayerHOC 具有 PlaylistHOC 和 FooterContainer 需要访问的方法(即来自 Prop )。

我的代码:

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

我还将 Prop 从 FooterPlayer 传递到 PlayerHOC ，效果很好。但是，我还想将默认 Prop 从 PlaylistHOC 传递到 PlayerHOC ，这些 Prop 永远不会更新，而且我不知道如何在保持此流程的同时实现这一点。

例如:const Player = PlaylistHOC(PlayerHOC(FooterContainer)); 这将允许我从 PlaylistHOC 和 FooterPlayer 传入初始 Prop > 到 PlayerHOC 但随后我将无法通过 props 访问 PlayerHOC 方法。

我该怎么做？

Answer 1

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

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

我稍微更改了代码以便能够对其进行测试，但其关键思想是我如何扩展 WrappedComponent 而不是 React.Component 在你的 mixin 中。

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 {

}

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