阵营高阶组件初始道具

Question

我创建一个播放器库，并希望做出反应流向是这样的：

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。

我已经更改了一段代码以便能够测试它，但其关键想法是我已将WrappedComponent而不是React.Component扩展到您的mixins中。

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 { 

} 

被警告的装饰都没有明确，可能发生很大的变化。