Переопределение методов в компонентах React - антипаттерн, но как мне это сделать? - PullRequest
0 голосов
/ 17 июня 2019

Поверьте мне, когда я скажу, что если бы у меня был какой-то другой выбор, я бы его выбрал, но я в своем уме.

Я работаю в большой корпорации, в которой уже есть целая библиотека, посвященная авторизации.И авторизация работает, по большей части, , однако , способ, которым она работает, заключается в том, чтобы поместить ваше приложение между Компонентом авторизации в функции рендеринга, вот так.Вы не можете изменить код компонента авторизации.

Ожидается, что вы также будете использовать собственный магазин Redux библиотеки, и вы можете добавить редукторы, но не промежуточное программное обеспечение, к этой библиотеке.Вы не можете коснуться этого кода.

   <Provider store={importedStore}>
     <AuthorisedComponent
        organisationId={orgId}
        journeyConfig={journeyConfig}
        allowUnauthorised={true}
        data-selector="journey"
      >
        <YourApp/>
      </AuthorisedComponent>
   </Provider>

Здесь все становится сложнее - и немного ... нетрадиционно.AuthorizedComponent выполняет вызов API для получения токена JWT , пока что это очень хорошо, но он не хранит токен jwt где-либо в памяти, хранилище сеансов или локальном хранилище. Вместо этогоон хранит его во внутреннем состоянии 1015 *, которое не является общедоступным.Я могу, однако, посмотреть на исходный код.

Мне нужен этот токен JWT для выполнения вызова API для создания этой новой функции.

Я думал о том, чтобы сделать следующее:

const ExtendedAuthorizedComponent = React.cloneElement(<AuthorizedComponent/>)
ExtendedAuthorizedComponent.prototype.handleLogin = new function.  

Я знаю, что это антипаттерн.Я знаю, ты не должен этого делать.Но у меня не хватает времени, и два заблуждения - единственный способ сделать это правильно.

...