Реакция - Связь и маршрутизация между компонентами, опубликованными в виде пакетов npm - PullRequest
Новая
       9

Реакция - Связь и маршрутизация между компонентами, опубликованными в виде пакетов npm

3 голосов
/ 31 января 2020

Я пытаюсь настроить архитектуру микро-интерфейса для проекта. Проект содержит несколько react приложений. Ниже приведена структура проекта:

  • контейнер
  • заголовок (npm пакет)
  • панель инструментов (npm пакет)
  • app1 ( npm пакет)
  • app2 (npm пакет)
  • app3 (npm пакет)

Здесь контейнер работает как оболочка для других приложений , В приложениях панели мониторинга отображаются ссылки на другие приложения, такие как app1, app2, app3 и т. Д. c ...

Когда пользователь входит в систему, заголовок и приложение панели инструментов отображаются на странице. С приборной панели пользователь может перейти к другим приложениям.

container

import React, { useState, useEffect } from 'react';
import Header from 'header';
import Dashboard from 'dashboard';
import { api } from '../api';

function storeUser(user) {
  if (user) {
    localStorage.user = JSON.stringify(user);
  } else {
    delete localStorage.user;
  }
}

function Container() {
  const [error, setError] = useState([]);
  const [user, setUser] = useState();

  const login = async () => {
    try {
      const user = await api({
        endpoint: 'identity/login',
        method: 'POST',
        json: {
          email: 'test@abc.com',
          password: '12345'
        }
      });
      setUser(user);
      storeUser(user);
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <div>
      <input type="submit" value="Login" onClick={() => login()}></input>
      {user ? (
        <div>
          <Header />
          <Dashboard />
        </div>
      ) : (
        <span>{error}</span>
      )}
    </div>
  );
}

export default Container;

dashboard

function Dashboard() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await getApps();
      setData(response);
    };
    fetchData();
  }, []);

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Как мне сообщить container, что li в dashboard приложении ( был опубликован как npm пакет) и был выполнен щелчок по компоненту / приложению с использованием react-router?

1 Ответ

0 голосов
/ 01 февраля 2020

Просто передайте реквизит с обратным вызовом компоненту Dashboard root и используйте его в качестве обработчика onClick:

Контейнер:

<Dashboard onItemClicked={(itemUrl) => this.props.history.push(itemUrl)} />

Dashboard :

<li key={item.id} onClick={() => this.props.onItemClicked(item.url)}>{item.name}</li>

Затем компонент контейнера может использовать history API для вызова другого маршрута при вызове этой функции. Если контейнер использует react-router (и withRouter), он должен подключиться к настроенной вами маршрутизации. С этим полезен центральный файл, в котором хранятся пути маршрутов (строки).

Кроме того, вы можете передать всю команду history на панель управления.

...