스테이트리스 컴포넌트의 컨텍스트

스테이트리스 컴포넌트의 컨텍스트

컴포넌트에 다음 코드가 있으며 스테이트리스 컴포넌트가 코드의 이 부분에 액세스 할 수 있도록 하고 싶습니다.

주요 컴포넌트:

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

"Stateless:" 함수의 정의에 따라 제공한 것은 상태 비저장 함수가 아닙니다.액션 크리에이터를 덩크로 제공했습니다.대신 클라이언트 컴포넌트의 코드를 삽입하고 싶었을 것입니다.스테이트리스 컴포넌트의 컨텍스트에 액세스하려면 클라이언트컴포넌트는 다음과 같은 처리를 합니다(여기서 설명).

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

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

export default Client

저도 같은 질문이 있었어요.현재(2019년)에는 후크 useContext(contextName)를 사용하는 방법이 있습니다.문서: https://reactjs.org/docs/hooks-reference.html#usecontext

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

상태 비저장 구성 요소의 두 번째 매개 변수 사용

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;

또 다른 해결책은 자가 호출 함수입니다.

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

저도 같은 질문을 했지만, Expo SDK 32에 있었습니다. 즉, 후크에 접근할 수 없습니다.

그 실현 방법은 다음과 같습니다.

import { reduxForm } from 'redux-form'
import { ReduxFormContext } from 'redux-form/lib/ReduxFormContext'

const ShowFormName = () => (
  <ReduxFormContext.Consumer>
    {
      ({ form }) => <Text>{form}</Text>
    }
  </ReduxFormContext.Consumer>
)

export default reduxForm({ form: 'formName' })(ShowFormName)

언급URL : https://stackoverflow.com/questions/35866066/context-in-stateless-component