Передача состояния других компонентов

Question

Если бы я был реагировать Маршрутизирование настроенные так:

<Router history={hashHistory}> 
    <Route path='/' component={Home}> 
     <Route path='/name' component={Name} /> 
     <Route path="/level" component={Level} /> 
     <Route path="/level1" component={Level1} /> 
     <Route path="/level2" component={Level2} /> 
     <Route path="/result" component={Result} /> 
    </Route> 
</Router> 

и был компонент, как это:

import React, { Component } from 'react' 

class Name extends Component { 
    getInitialState() { 
     return { username: '' } 
    }, 
    onUpdateUser: function (e) { 
     this.setState({ username: e.target.value }) 
    }, 
    render() { 
     return (
      <div className="row"> 
       <div claassName="col-md-12"> 
       <div className="nameBox"> 
        <form className="form-inline" onSubmit={}> 
        <input type="text" className="form-control" placeholder="Desiered Username" onChange={this.onUpdateUser} value={this.state.username} /> 
        <button type="submit" className="btn btn-success">Submit</button> 
        </form> 
       </div> 
       </div> 
      </div> 
     ) 
    } 
} 

как бы я сделать username доступным для глобальной области видимости ? Должен ли я передать его через маршрутизатор или я могу определить его по-другому?

Как правило, после того, как имя пользователя установлено, я хочу, чтобы onSubmit передавал его на маршрут/level и с именем пользователя.

Как бы это осуществить?

Спасибо.

Answer 1

Вы можете либо сохранить это состояние в компоненте контейнера (может быть место, где у вас есть ваши маршруты) .EX .:

import React, { Component } from 'react' 

class Container extends Component { 
    constructor() { 
     this.state = {username: ''}; 
    } 

    updateUserName = (username) => { 
     this.setState({username}); 
    } 

    render() { 
    return <Router history={hashHistory}> 
     <Route path='/' component={Home}> 
      <Route path='/name' component={() =><Name updateUserName ={this.updateUserName}/>} /> 
      <Route path="/level" component={Level} /> 
      <Route path="/level1" component={Level1} /> 
      <Route path="/level2" component={Level2} /> 
      <Route path="/result" component={Result} /> 
     </Route> 
    </Router> 
} 
} 

, а затем в компоненте:

import React, { Component } from 'react' 

class Name extends Component { 
    onUpdateUser: function (e) { 
     this.props.updateUserName(e.target.value); 
    }, 
    render() { 
     return (
      <div className="row"> 
       <div claassName="col-md-12"> 
       <div className="nameBox"> 
        <form className="form-inline" onSubmit={}> 
        <input type="text" className="form-control" placeholder="Desiered Username" onChange={this.onUpdateUser} value={this.state.username} /> 
        <button type="submit" className="btn btn-success">Submit</button> 
        </form> 
       </div> 
       </div> 
      </div> 
     ) 
    } 
} 

Или старт используя библиотеки, такие как Redux или MobX, если вы нацелены на более крупный проект, они оставят ваше приложение на уровне React, чтобы вы могли сделать эти данные доступными для компонентов, которые напрямую не связаны с вашим деревом компонентов.

Answer 2

Для меня лучшим подходом будет глобальный контроль состояния (например, Flux/Redux).

Но вы можете достичь чего-то подобного с react-router и params по URL. Что я хотел бы сделать это:

• OnClick представить функцию
• перенаправить на другой ваш маршрут с Params
• доступа ваше имя пользователя на другой странице

Пример ниже:

onClickFunction() { 
    router.push({ 
    pathname: '/level1/' + this.state.username 
    }) 
} 
render() { 
     return (
      <div className="row"> 
       <div claassName="col-md-12"> 
       <div className="nameBox"> 
        <form className="form-inline" onSubmit={}> 
        <input type="text" className="form-control" placeholder="Desiered Username" onChange={this.onUpdateUser} value={this.state.username} /> 
        <button type="submit" className="btn btn-success" onClick={ onClickFunction }>Submit</button> 
        </form> 
       </div> 
       </div> 
      </div> 
     ) 
    } 

И на вашем, вы должны сделать что-то вроде этого:

<Route path="/level/:username" component={Level} /> 

Не забудьте связать свой onClickFunction на конструкторе, чтобы избежать проблем с это