Есть ли способ открыть тот же экземпляр реагирующего компонента в новой вкладке? - PullRequest
Новая
       17

Есть ли способ открыть тот же экземпляр реагирующего компонента в новой вкладке?

2 голосов
/ 24 марта 2020

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

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

class App extends Component{
    constructor(props){
        this.state = {arr = []};
    }

    handleUserInput = arr => {
        //make changes to arr
        this.setState({ arr });
    };


    render(){
        return(
            // code to call this.handleUserInput()
            <button href="/newtab" target="_blank"> </button>
            {arr} //display the array here
            .......
        )
    }
}

Сценарий выглядит следующим образом:

  1. Я буду отображать этот компонент на своей главной странице, и там пользователь может что-то ввести в компонент, основываясь на том, что arr в состояние компонента изменится.
  2. Когда пользователь нажимает кнопку, этот же компонент должен быть открыт на новой вкладке, где URL будет заканчиваться на "/newtab".
  3. В то время как оба вкладки открыты, и когда пользователь вводит что-то для компонента на главной странице и запускает обновление в arr, я хочу, чтобы этот обновленный arr автоматически отражался в компоненте, присутствующем в "/ newtab"

Я использую реагирующую маршрутизацию следующим образом: 

const routing = (  
    <Router>  
        <Route exact path="/" component={App} />  //user inputs something on this instance of App and arr from this App instance will be updated
        <Route exact path="/newtab" component={App additionalProps={additionalProps} />  // I want the updated arr from the App instance on the main page to show up here.
    </Router>  
  )

ReactDOM.render(routing, document.getElementById('root'));

Я четко понимаю, что благодаря такому подходу с использованиемact-router для открытия компонента в новой вкладке я по сути открываю новый экземпляр Компонент приложения на новой вкладке, и он делает компонент App на главной странице и компонент App на странице "/ newtab" совершенно не связанными.

  1. Я хочу знать, есть ли способ поделиться состоянием между этими двумя компонентами, которые находятся на разных вкладках. Я на полпути в реализации подхода локального хранилища. (или)
  2. Есть ли способ заставить реакции-маршрутизатор открыть тот же экземпляр компонента App в новой вкладке, чтобы был только один экземпляр? Если это возможно, возникнут ли какие-либо проблемы с желанием передать новые реквизиты компоненту, открывающемуся в "/ newtab"?
  3. Будет ли решена моя проблема, если я использую redux?

Пожалуйста, дайте мне знать, если мне где-то неясно и могу ли я предоставить вам больше информации. Большое спасибо.

1 Ответ

3 голосов
/ 24 марта 2020

Ваше понимание React немного искажено - вы не можете открыть «один и тот же экземпляр» компонента, так как компоненты не отображаются в DOM. Компоненты преобразуются в HTML элементы, поэтому две разные страницы имеют два разных элемента DOM - они не могут быть общими.

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

React не поддерживает это, новая вкладка - это новое приложение, это совершенно отдельный экземпляр.

Единственный способ поделиться состоянием между двумя экземплярами приложения, которые открыты в одном браузере, - это использовать сторонние / внешние API.

Например, вы можете подключить свое приложение к локальному хранилищу браузера. Это означает, что оба экземпляра приложения будут использовать одни и те же данные локального хранилища. Будьте осторожны с этим, поскольку вы не должны хранить какие-либо конфиденциальные данные (например, данные пользователя, пароли, банковские реквизиты, токены доступа) в локальном хранилище, поскольку они подвержены XSS и другим атакам.

Существует руководство о том, как это сделать (автор использует Redux), но я уверен, что вам НЕ НУЖНО использовать Redux для этого.

...