Contesto nel componente "stateless"?

Question

Ho il seguente codice in un componente e vorrei un componente stateless per accedere a questa parte di codice:

Componente principale:

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/>; 
} 

Stateless:

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 
} 
} 

Gradirei qualsiasi consigli, saluti!

Answer 1

Ciò che è stato fornito sotto la definizione di "Stateless:" non è la funzione di una funzione stateless. Hai fornito il tuo creatore di azioni come un thunk. Presumo che tu volessi inserire il codice per il componente Client invece. Per accedere contesto in un componente senza stato, il componente client potrebbe fare qualcosa di simile (che è documentata here)

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

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

export default Client 

Answer 2

Un'altra soluzione è una funzione di auto invocazione:

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

Oppure, se si definiscono le contextTypes separatamente per riutilizzarlo, è possibile fare:

//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> 
})