Nie wiem, dlaczego po kliknięciu, aby otworzyć modalny ekran główny znika, gdy modalny jest na nim:

https://github.com/RodPin/Modal-with-Redux

0
Rodrigo 25 listopad 2018, 22:07

1 odpowiedź

Najlepsza odpowiedź

Przeprowadziłem refaktoryzację Twojej aplikacji. Masz wiele błędów, które wstrzymują Twoją aplikację.

Przykład pracy: https://codesandbox.io/s/xj553k7nno

Proszę uważnie przeczytać następujące uwagi:

  • Użyj pakietu npm react-redux (dokumentacji) do połączenia i wysyłka do redux
  • Oddziel swój containers od components: https: //medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
  • Korzystając z prop-types, polecam zdefiniowanie propTypes poza klasą (wolę to z class lub function i przed lub po export ). Zobacz to, aby uzyskać więcej szczegółów.
  • Utwórz actions, które manipulują state Redux i stwórz types, które obsługują to, co state do manipulowania.
  • Powszechną konwencją dla Redux actions jest return type i payload (chociaż czasami payload może nie być konieczne) i dla wszystkich reducers oczekiwać, że type i payload z akcji.
  • Użyj instrukcji switch zamiast zagnieżdżonych instrukcji if i else dla reducers.
  • Podczas importskorzystaj z następującej kolejności:
    • 1.) Moduły węzłów
    • 2.) Komponenty/Kontenery/Akcje/Reduktory/Funkcje pomocnicze
    • 3.) Arkusze stylów
  • Nie zagnieżdżaj nieprawidłowych elementów HTML: <p><div/></p> (div nie może pojawić się jako child z p)
  • Nie używaj niejasnych nazw rekwizytów: close, open, ...itd. Zamiast tego bądź bardziej deklaratywny: closeModal, openModal, ...itd.
  • Nie używaj podkreśleń _, ponieważ nie jest to powszechna konwencja nazewnictwa JavaScript
  • Zredukuj powtarzalny kod dzięki komponentom wielokrotnego użytku (na przykład: ModalColor)!
  • W tym przykładzie React state nie jest potrzebny do aktualizacji state Reduxa. Redux może kontrolować własne state za pośrednictwem actions i reducers.
  • Użyj <Fragment></Fragment> lub <></>, gdy musisz zahermetyzować elementy JSX, które nie wymagają zawierającego elementu HTML.
  • Uprość strukturę swojej aplikacji:

     ├── build
     |   ├── css
     |   |   ├── main.[contenthash:8].css
     |   |   └── main.[contenthash:8].css.map
     |   ├── js
     |   |   ├── main.[hash].js
     |   |   └── main.[hash].js.map
     |   ├── media
     |   |   └── [hash].[ext]
     |   └── favicon.ico
     |   └── index.html
     |
     ├── public
     |   ├── favicon.ico
     |   └── index.html
     |
     ├── src
     |   ├── actions
     |   ├── components
     |   ├── containers
     |   ├── images
     |   ├── reducers
     |   ├── routes
     |   ├── store
     |   ├── styles (global)
     |   ├── tests
     |   ├── types
     |   ├── utils
     |   ├── index.js
     |   ├── serviceWorker.js
     |   └── setupTests.js
     |
     ├── .gitignore
     ├── README.md
     ├── package.lock.json
     └── package.json
    
1
Matt Carlotta 26 listopad 2018, 01:12