Реагировать: открыть страницу в новой вкладке с состоянием - PullRequest
Новая
       22

Реагировать: открыть страницу в новой вкладке с состоянием

0 голосов
/ 02 апреля 2019

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

Я попытался использовать window.open () с моим обработчиком onClick. Это откроет новую вкладку, но не переносит свойства из родительского состояния, которые необходимы. Я попытался использовать localStorage.setItem (), но это слишком глупо и будет работать только в зависимости от настроек пользователя.

Это метод onclick, который создает новую страницу. Я хотел бы иметь возможность открыть здесь новую вкладку. 

 handleContract = (id) => {
  API.openRow(id)
  .then(res => {
    const pdfs = res.data;
    this.setState({pdfs});
    this.props.history.push({
      pathname: '/pdf',
      state: { labels:this.state.labels,
        pdfs:this.state.pdfs,
        titles:this.state.titles }
    })
  })
  .catch(err => console.log(err));
  API.titles(id)
  .then(res => {
    const titles = res.data;
    this.setState({titles});
  })
}

как дополнительный вариант. Возможно ли, чтобы мой метод onClick отображал модальное окно и отображал компонент таким образом?

Ответы [ 2 ]

0 голосов
/ 02 апреля 2019

Ну, поскольку это новый экземпляр приложения, нам нужно каким-то образом переносить данные вручную.Я сам никогда этого не делал, но вы можете попробовать использовать более традиционные способы, такие как строки запроса / параметры URL (если у вас не слишком много информации), или вы можете использовать window.postMessage https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Нокажется, что есть также способ архивировать то, что вы хотите с порталом React.Поскольку, как я уже сказал, я сам никогда не делал ничего подобного, я надеюсь, что это нормально, если я поделюсь ссылкой на среднюю статью, в которой объясняется, как это сделать: https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202

0 голосов
/ 02 апреля 2019

Вы не можете передать состояние между двумя окнами или вкладками.Вам нужно передать параметр из URL и получить данные, используя некоторые API, используя этот параметр

...