Реагировать более высокий порядок компонент начальных Принадлежит

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 являются mixins, поэтому они должны наследоваться от обернутого компонента вместо 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); 

Кстати, попробуйте decorators для некоторых действительно фантазии синтаксиса как

@PlayerlistHOC 
@PlayerHOC 
class FooterContainer { 

} 

Будьте осторожны, декораторы не являются окончательными и могут измениться много.