は、私はプレーヤーのライブラリを作成し、[次のように行くための流れに反応したいのです高次コンポーネントの初期小道具

Question

を反応します。

私がこの方向に進むことを望むのは、には、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); 

は私も正常に動作しPlayerHOCにFooterPlayerから小道具を渡します。しかし、私はまた、PlaylistHOCからPlayerHOCへのデフォルトの小道具を渡したいと思います。これは決して更新されないでしょう。例えば

：const Player = PlaylistHOC(PlayerHOC(FooterContainer));これは私がPlaylistHOCとFooterPlayerからPlayerHOCに最初の小道具に渡すことができるようになるが、その後、私は小道具でPlayerHOCメソッドにアクセスすることはできません。

どうすればよいですか？

Answer 1

私はconst Player = PlaylistHOC(PlayerHOC(FooterContainer));を使用します。これは、親コンポーネントが子コンポーネントから小道具を受け取ることができないためです。 とPlayerHOCの両方がmixinsであるように見えるので、ラップされているコンポーネントからReact.Componentの代わりに継承する必要があります。

コードを少し変更してテストすることができましたが、重要なアイデアはの代わりにWrappedComponentをどのように拡張したかです。ところで

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

、デコレータは決定的なものではなく、多くのことを変更する場合があります注意して

@PlayerlistHOC 
@PlayerHOC 
class FooterContainer { 

} 

のようないくつかの本当に派手な構文についてはdecoratorsを試してみてください。