Вы когда-нибудь сталкивались с проблемой, когда вам нужны разные пользовательские интерфейсы для разных клиентов? Я не говорю о другой визуальной теме, которую можно применить через css к тем же элементам HTML. Я говорю о другом HTML, показанном пользователю, вы даже можете подумать, что это другой веб-сайт.
Мы можем очень легко добиться этого эффекта с тем же репозиторием пользовательского интерфейса.
Там, где я работаю в настоящее время, мы показываем миллионы предложений по аренде жилья для отдыха для пользователей, однако у нас есть несколько доменов, где мы хотим, чтобы предложения выглядели совершенно по-разному. Мы используем единую кодовую базу для всех этих доменов.
Допустим, у вас есть два разных домена: kitten.com и doggo.com.
Вы хотите, чтобы на целевой странице kitten.com был рисунок кота, а на doggo.com рисунок собаки.
У вас есть два компонента React:
const Kitten = () => (<div>This is a kitten component</div>); const Doggo = () => (<div>This is a dog component</div>);
Тогда вам нужен компонент, который решает, какое животное должно быть отображено :)
const componentByType = { 'doggo': Doggo, 'kitten': Kitten } const AnimalSwitcher = ({ type }) => { const AnimalComponent = componentByType[type] return ( <AnimalComponent /> ) }
Тогда вам просто нужно его использовать.
Допустим, ваш сервер смотрит, в каком домене вы сейчас находитесь, и возвращает apiData.
const apiData = { landingPageComponent: 'doggo' } const App = () => ( <AnimalSwitcher type={apiData.landingPageComponent} /> );
Это действительно масштабируемый способ для некоторых случаев использования. Вы можете иметь X разных доменов и использовать X разных компонентов на каждом из них.
Однако у этого есть некоторые недостатки. Каждый клиент должен будет загрузить один и тот же пакет, даже если он им не пользуется. Поэтому его нужно использовать, имея это в виду.
Вот вам фото собачки :)