Mobxを注入、オブザーバーとHOC

Question

私はアドホックはユーザが許可されているかどうかを確認するためであるhttps://jsfiddle.net/v0592ua1/1/

const {observable, computed, extendObservable} = mobx; 
const {observer, inject, Provider} = mobxReact; 
const {Component} = React; 
const {render} = ReactDOM 
class AppState { 
    @observable authenticated = false; 
    @observable authenticating = false; 
} 

class Store2 { 
    @observable blah = false; 
} 

function Protected(Component) { 
    @inject("appState") 
    @observer 
    class AuthenticatedComponent extends Component { 
     render() { 
      const { authenticated, authenticating } = this.props.appState; 
      return (
       <div className="authComponent"> 
        {authenticated 
         ? <Component {...this.props} /> 
         : !authenticating && !authenticated 
           ? <p> redirect</p> 
           : null} 
       </div> 
      ); 
     } 
    } 
    return AuthenticatedComponent; 
} 


@inject("s2") 
@Protected 
@observer 
class Comp extends Component { 
    componentDidMount() { 
     console.log('mount'); 
    } 

    render() { 
     return (
      <p>blabla</p> 
     ) 
    } 
} 

const appS = new AppState(); 
const s2 = new Store2(); 

render(
    <Provider appState={appS} s2={s2}> 
     <Comp /> 
    </Provider>, 
    document.getElementById("app") 
) 

を保護したコード。

@injectがProtectedの外側にある場合は、componentDidMountがトリガーします（認証されていない場合は1回、認証された場合は2回）。外付けデコレータとしてProtectedを置くと、期待どおりに動作するように見えますが、警告が表示されますが、警告が表示されます。

You are trying to use 'observer' on a component that already has 'inject'

これを処理する適切な方法は何ですか？

Answer 1

機能で保護された私は関数引数でReact.Componentを再定義していましたが、React.Componentではなく引数を拡張していました。 解決策 - >引数の名前変更コンポーネント - >子ども

function Protected(Children) { 
    @inject("appState") 
    @observer 
    class AuthenticatedComponent extends Component { 
     render() { 
      const { authenticated, authenticating } = this.props.appState; 
      return (
       <div className="authComponent"> 
        {authenticated 
         ? <Children {...this.props} /> 
         : !authenticating && !authenticated 
           ? <p> redirect</p> 
           : null} 
       </div> 
      ); 
     } 
    } 
    return AuthenticatedComponent; 
}