2016-03-08 9 views
12

私はコンポーネントに次のコードを持っていると私は、コードのこの部分にアクセスするためのステートレスなコンポーネントをしたいと思います:"ステートレス"コンポーネントのコンテキスト?

メインコンポーネント:

function createApp(store, communityIds) { 
const App = React.createClass({ 

    childContextTypes: { 
     localizedString: React.PropTypes.func, 
    }, 

    getChildContext: function() { 
     return { 
      localizedString: function(key, fallback) { 
       return getKey(key, fallback); 
      }, 
     }; 
    }, 

    render: function() { 
     return (
      <Provider store={store}> 
       <Client communityIds={communityIds}/> 
      </Provider> 
     ); 
    }, 
}); 

return <App/>; 
} 

をステートレス:

export default() => (dispatch, getState) => { 
const state = getState(); 

const token = state.user.get('token'); 

if (!token) { 
    throw new Error('test'); // this.context.localizedString does not work 
} 
} 

は、いずれかをお願い申し上げヒント、ご安心!

答えて

14

"ステートレス:"機能の定義の下で提供したものは、ステートレス機能とは異なります。アクションクリエイターをサンクとして提供しました。私はあなたの代わりにクライアントコンポーネントのコードを挿入すると仮定します。ステートレスコンポーネントでコンテキストにアクセスするには、お使いのクライアントコンポーネントは、(here文書化されている)、このような何か

const Client = (props, context) => { 
    return <div >{context.localizedString("someKey", "someFallback")} </div> 
} 

Client.contextTypes = { 
    localizedString: React.PropTypes.func 
} 

export default Client 
1

を行うだろう別の解決策は、自己の呼び出し機能である:

export default (Component=>(
    Component.contextTypes = { 
    localizedString: React.PropTypes.func 
    }) && Component 
)((props, context)=>{ 
    return <div>{context.localizedString("someKey", "someFallback")}</div> 
}) 

それともcontextTypesを定義する場合それを再利用するために個別に行うことができます:

//addContextTypes.js 
export default function(Component){ 
    return (Component.contextTypes = { 
    localizedString: React.PropTypes.func 
    }) && Component 
} 

//component.jsx 
import addContextTypes from './addContextTypes' 
export default addContextTypes((props, context)=>{ 
    return <div>{context.localizedString("someKey", "someFallback")}</div> 
}) 
関連する問題