Создание общих пользовательских элементов в компонентах React

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

<core-app>
    <core-login></core-login>
</core-app>

is a Custom Element - это настраиваемый элемент, который отображает компонент React, этот компонент также содержит смесь некоторых дочерних компонентов, например, которые являются собственными настраиваемыми элементами, частью общей библиотеки компонентов пользовательского интерфейса, и других компонентов React.

Проблема в том, что я изо всех сил пытаюсь заставить компоненты React передавать реквизиты и события в пользовательские элементы, мне удалось преобразовать реквизиты в атрибуты HTML, «привязав» данные JSON.

Меня беспокоит это; добавляет ли вся эта дополнительная сложность хоть какую-то ценность? Разве не было бы лучше, если бы пользовательские элементы на самом деле были компонентами React? Как мне легко поделиться общими пользовательскими элементами в компонентах React?


reactjs custom-element micro-frontend
person human    schedule 09.08.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

React - это не технология, которая отлично сочетается с CustomElements и, следовательно, с веб-компонентами .

Вы должны спросить себя, зачем вы это делаете. Если у вас есть только компоненты React, преобразование их в CustomElements только ради этого не даст вам такой большой пользы (хотя это дает вам возможность компоновки во время выполнения бесплатно ради большего размера пакета). Вы можете тривиально обмениваться (дочерними / UI) компонентами React между «более крупными» (функциональными) компонентами React.

CustomElements - это стандарт, который встроен во все современные браузеры и является технологией агностик - React имеет собственную компонентную модель, которая полагается на добавленную среду выполнения и не предназначена для легкого доступа к другим технологиям фреймворка. Активное использование React обычно означает блокировку фреймворка, и это связано с расходами.

Кто контролирует общие CustomElements, которыми вы хотите поделиться с React? Ты? Затем спросите себя, является ли вообще добавление оболочки CustomElement преимуществом.

Если вы контролируете общие CustomElements и действительно хотите придерживаться их, то альтернативой использованию атрибутов является Пользовательские события DOM. Таким образом, вы не будете вынуждены сериализовать свои реквизиты React, но сможете довольно легко их отправлять.

person Christian Ulbrich    schedule 28.10.2019