[reactjs] React에서 전역 변수를 선언하는 방법은 무엇입니까?

i18n구성 요소 (앱에로드되는 첫 번째 구성 요소)에서 번역 개체를 한 번 초기화했습니다 . 다른 모든 구성 요소에는 동일한 개체가 필요합니다. 모든 구성 요소에서 다시 초기화하고 싶지 않습니다. 주위는 무엇입니까? 창 범위에서 사용할 수 있도록 만드는 것은 render()방법 에서 사용해야하므로 도움이되지 않습니다 .

i18n 특정 솔루션이 아닌 이러한 문제에 대한 일반적인 솔루션을 제안하십시오.



답변

Context 를 사용해 보지 않겠 습니까?

상위 구성 요소에서 전역 컨텍스트 변수를 선언 할 수 있으며이 변수는을 통해 구성 요소 트리에서 액세스 할 수 있습니다 this.context.varname. 부모 구성 요소 를 지정 childContextTypes하고 getChildContext그 후에 contextTypes는 자식 구성 요소를 지정하여 모든 구성 요소에서이를 사용 / 수정할 수 있습니다 .

그러나 문서에 언급 된대로 다음 사항에 유의하십시오.

명확한 코드를 작성할 때 전역 변수를 피하는 것이 가장 좋은 것처럼 대부분의 경우 컨텍스트를 사용하지 않아야합니다. 특히, “타이핑을 저장”하고 명시적인 props를 전달하는 대신 사용하기 전에 두 번 생각하십시오.


답변

반응을 넘어서

가져 오기가 이미 글로벌 이라는 사실을 모를 수 있습니다 . 객체 (싱글 톤)를 내 보내면 import 문으로 전역 적으로 액세스 할 수 있으며 전역 적으로 수정할 수도 있습니다 .

무언가를 전역 적으로 초기화하고 싶지만 한 번만 수정되도록하려면 처음에 수정 가능한 속성 이있는이 싱글 톤 접근 방식 을 사용할 수 있지만 처음 사용한 Object.freeze후에 사용 하여 초기화 시나리오에서 변경 불가능 하도록 할 수 있습니다.

const myInitObject = {}
export default myInitObject

그런 다음 그것을 참조하는 init 메소드에서 :

import myInitObject from './myInitObject'
myInitObject.someProp = 'i am about to get cold'
Object.freeze(myInitObject)

myInitObject그것이 어디서든 참조 할 수 여전히 글로벌 될 것입니다 가져 오기로 하지만 냉동을 유지하고 누군가 시도를 수정하는 경우에 발생합니다.

react-create-app을 사용하는 경우

(실제로 찾고 있던 것)이 시나리오에서는 환경 변수를 참조 할 때 전역 개체를 깨끗하게 초기화 할 수도 있습니다.

프로젝트의 루트에 접두사가 붙은 변수 를 사용 하여 .env 파일을 만드는 REACT_APP_것은 매우 훌륭합니다. process.env.REACT_APP_SOME_VAR필요에 따라 JS 및 JSX 내에서 참조 할 수 있으며 설계 상 변경할 수 없습니다.

이렇게하면 window.myVar = %REACT_APP_MY_VAR%HTML 로 설정할 필요가 없습니다 .

Facebook에서 직접 이에 대한 더 유용한 세부 정보를 참조하십시오.

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables


답변

권장하지는 않지만 …. 앱 클래스에서 componentWillMount를 사용하여 전역 변수를 추가 할 수 있습니다.

componentWillMount: function () {
    window.MyVars = {
        ajax: require('../helpers/ajax.jsx'),
        utils: require('../helpers/utils.jsx')
    };
}

여전히 이것을 해킹이라고 생각하지만 작업을 완료합니다.

btw componentWillMount는 렌더링 전에 한 번 실행됩니다. 자세한 내용은 https://reactjs.org/docs/react-component.html#mounting-componentwillmount를 참조하십시오.


답변

다음 내용으로 ./src 폴더에 “config.js”라는 파일을 만듭니다.

module.exports = global.config = {
    i18n: {
        welcome: {
            en: "Welcome",
            fa: "خوش آمدید"
        }
        // rest of your translation object
    }
    // other global config variables you wish
};

기본 파일 “index.js”에 다음 행을 입력하십시오.

import './config';

개체가 필요한 모든 곳에서 다음을 사용하십시오.

global.config.i18n.welcome.en


답변

webpack에 전역 변수를 유지할 수 있습니다. webpack.config.js

externals: {
  'config': JSON.stringify(GLOBAL_VARIABLE: "global var value")
}

js 모듈에서 다음과 같이 읽을 수 있습니다.

var config = require('config')
var GLOBAL_VARIABLE = config.GLOBAL_VARIABLE

이것이 도움이되기를 바랍니다.


답변

지금까지 찾은 가장 좋은 방법은 React Context 를 사용하는 것이지만이를 고차 공급자 컴포넌트 내부에서 분리하는 것 입니다.


답변

react https://facebook.github.io/react/docs/reusable-components.html#mixins 에서 mixins를 사용할 수 있습니다 .