i18n
Raz zainicjowałem obiekt translacji w komponencie (pierwszym komponencie, który ładuje się w aplikacji). Ten sam obiekt jest wymagany we wszystkich innych komponentach. Nie chcę ponownie inicjować go w każdym komponencie. Co to jest? Udostępnienie go zakresowi okna nie pomaga, ponieważ muszę go użyć w render()
metodzie.
Proszę zasugerować ogólne rozwiązanie tego problemu, a nie konkretne rozwiązanie dla i18n.
Redux
lubFlux
biblioteki, która może obsługiwać dane lub stan globalnie. i możesz łatwo przejść przez wszystkie komponentyOdpowiedzi:
Dlaczego nie spróbujesz użyć kontekstu ?
Możesz zadeklarować globalną zmienną kontekstową w dowolnym komponencie nadrzędnym, a zmienna ta będzie dostępna w drzewie komponentów przez
this.context.varname
. Musisz tylko określićchildContextTypes
igetChildContext
w komponencie nadrzędnym, a następnie możesz użyć / zmodyfikować to z dowolnego komponentu, po prostu określająccontextTypes
komponent podrzędny.Należy jednak zwrócić uwagę na to, jak wspomniano w dokumentach:
źródło
Beyond React
Możesz nie wiedzieć, że import jest już globalny . Jeśli eksportujesz obiekt (singleton), jest on wtedy dostępny globalnie jako instrukcja importu i może być również modyfikowany globalnie .
Jeśli chcesz zainicjować coś globalnie, ale upewnij się, że zostanie zmodyfikowany tylko raz, możesz użyć tego podejścia pojedynczego, które początkowo ma modyfikowalne właściwości, ale możesz użyć go
Object.freeze
po pierwszym użyciu, aby zapewnić jego niezmienność w scenariuszu inicjującym.następnie w swojej metodzie init odwołując się do niego:
myInitObject
Nadal będzie globalna, ponieważ może się odwoływać wszędzie jako import , ale pozostaną zamrożone i rzucać jeśli ktoś próbuje go zmodyfikować.Jeśli używasz aplikacji react-create-app
(czego właściwie szukałem) W tym scenariuszu można również czysto inicjalizować obiekty globalne podczas odwoływania się do zmiennych środowiskowych.
Utworzenie pliku .env w katalogu głównym projektu z prefiksowymi
REACT_APP_
zmiennymi wewnątrz robi całkiem nieźle. Możesz odwoływać się w swoim JS i JSX,process.env.REACT_APP_SOME_VAR
jak potrzebujesz, ORAZ jest to niezmienne zgodnie z projektem.Pozwala to uniknąć konieczności ustawiania
window.myVar = %REACT_APP_MY_VAR%
w HTML.Zobacz więcej przydatnych informacji na ten temat bezpośrednio z Facebooka:
https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
źródło
Nie jest to zalecane, ale ... możesz użyć componentWillMount z klasy aplikacji, aby dodać przez nią zmienne globalne ... trochę tak:
nadal uważaj to za hack ... ale to wykona twoją pracę
btw componentWillMount wykonuje się raz przed renderowaniem, więcej informacji znajdziesz tutaj: https://reactjs.org/docs/react-component.html#mounting-componentwillmount
źródło
componentWillMount
ta jest przestarzała: awarejs.org/blog/2018/03/27/update-on-async-rendering.htmlUtwórz plik o nazwie „config.js” w folderze ./src z następującą zawartością:
W swoim głównym pliku „index.js” umieść następującą linię:
Gdziekolwiek potrzebujesz swojego obiektu, użyj tego:
źródło
Może przechowywać zmienne globalne w webpacku, czyli w
webpack.config.js
W module js można przeczytać jak
Mam nadzieję, że to pomoże.
źródło
Najlepszym sposobem, jaki znalazłem do tej pory, jest użycie kontekstu reakcji, ale w celu odizolowania go wewnątrz komponentu dostawcy wysokiego rzędu .
źródło
Możesz użyć mixinów w React https://facebook.github.io/react/docs/reusable-components.html#mixins .
źródło
Oto nowoczesne podejście, które wykorzystaliśmy
globalThis
w naszym React Native aplikacji .globalThis
jest teraz uwzględniony w ...appGlobals.ts
App.tsx ( nasz główny plik punktu wejścia )
anyWhereElseInTheApp.tsx
źródło
Nie wiem, co próbują powiedzieć za pomocą tego „kontekstu reakcji” - mówią do mnie po grecku, ale oto jak to zrobiłem:
Przenoszenie wartości między funkcjami na tej samej stronie
W swoim konstruktorze powiąż setera:
Następnie zadeklaruj funkcję tuż pod konstruktorem:
Jeśli chcesz to ustawić, zadzwoń
this.setSomeVariable("some value");
(Możesz nawet ujść na sucho
this.state.myProperty = "some value";
)Kiedy będziesz chciał, zadzwoń
var myProp = this.state.myProperty;
Używanie
alert(myProp);
powinno ci daćsome value
.Dodatkowa metoda tworzenia szkieletów do przenoszenia wartości między stronami / komponentami
Możesz przypisać model do
this
(techniczniethis.stores
), więc możesz odwołać się do niego za pomocąthis.state
:Zapisz to w folderze o nazwie
stores
jakoyourForm.jsx
.Następnie możesz to zrobić na innej stronie:
Jeśli ustawiłeś
this.state.someGlobalVariable
inny komponent za pomocą funkcji takiej jak:który łączysz w konstruktorze z:
wartość w
propertyTextToAdd
zostanie wyświetlona przySomePage
użyciu kodu pokazanego powyżej.źródło