"无状态"组件中的上下文？

Question

我在组件中有以下代码,我想要一个无状态组件来访问这部分代码:

主要成分:

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

Answer 1

您在"无状态:"功能定义下提供的功能不是无状态功能.您已将动作创建者视为thunk.我假设您想要为您的客户端组件插入代码.要访问无状态组件中的上下文,您的客户端组件将执行类似这样的操作(此处记录)

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

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

export default Client

Answer 2

我有同样的问题。现代方式（2019年）是使用钩子useContext（contextName）。文件：https：//reactjs.org/docs/hooks-reference.html#usecontext

  const dumbComp = (props) => { 
       const context = useContext(contextName);
          return(
             <div>
             ...
          </div>
       );
    }

Answer 3

使用无状态组件的第二个参数

const MyStatelessComponent = (props, context) => { 
   const onGoButtonClick = () => {
      context.router.push('https://www.google.co.in');
   };

   return(
      <div>
         <button onClick={() => onButtonClick()}>
            {props.buttonName}
         </button>
      </div>
   );
}

MyStatelessComponent.propTypes = {
   buttonName: PropTypes.string.isRequired,
};

MyStatelessComponent.contextTypes = {
   router: React.PropTypes.object.isRequired,
};

export default MyStatelessComponent;