Возвращение значения из дочернего компонента после его маршрутизации в ReactJS - PullRequest
Новая
       6

Возвращение значения из дочернего компонента после его маршрутизации в ReactJS

0 голосов
/ 04 ноября 2018

Я новичок, чтобы реагировать, и в настоящее время я застрял в сценарии, где у меня есть 2 компонента,

  1. Компонент запуска
  2. Компонент разработчика

При этом компонент Launcher вызывается первым. После нажатия на кнопку он направляется к компоненту разработчика. Я хочу передать значение обратно из компонента Developer в компонент Launcher после маршрутизации.

Launcher.js 

class LauncherApp extends Component {
      constructor(props) {
        super(props);
        this.developerMode = this.developerMode.bind(this)
      }

    developerMode(){
        this.props.history.push('/dev') //routes to developer component
       }

    render() {
       return (
    <div>
             <List>
                <ListItem
                onClick={this.developerMode}>Developer<ListItem/>
             </List>
    </div>
     );
  }
      }

Developer.js 

class DeveloperMode extends Component {
          constructor(props) {
            super(props);
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
               this.state = {
                  url:'Prod'
                };
          }

           handleChange(event) {
            this.setState({
              url: event.target.value
            });
          } 
            handleSubmit(event) {
            event.preventDefault();
            var env=this.state.url;
              this.props.signOut();
             }
render() {
      return(
        <div>
          <h3>Select Environment </h3>
        <RadioButtonGroup name="selectURL" defaultSelected="Prod"  onChange={this.handleChange}>
          <RadioButton
            value="Prod"
            label="Production"

          />
          <RadioButton
            value="Dev"
            label="Development"

          />
          <RadioButton
          value="Test"
          label="Testing"

        />
        </RadioButtonGroup>
        <RaisedButton label="Save" onClick={this.handleSubmit}/>
        </div>
      );
    }
        }

Routes.js 

const Routes = () => (


      <Router>             
          <div>
          <Route component={LauncherApp}/>
              <Switch>
                    <Route exact path={"/"} component={ApplicationList} />
                    <Route path={"/dev"} component={DeveloperMode} />
              </Switch>
         </div>

  </Router>

);

Есть ли способ получить значение 'url' из компонента разработчика, когда оно маршрутизируется в Launcher.js

1 Ответ

0 голосов
/ 04 ноября 2018

Один из возможных способов - использовать избыточность, но вы не указали, что хотите ее использовать. Так что вы можете использовать этот другой способ, который я бы не предпочел обычному. Вы можете передать функцию в качестве реквизита в маршрутизаторе 

    <Route exact path='/dev' render={(props) => (
                                         <Developer {...props} getURL={this.getURLFromDeveloper}/>
                                        )}/>
    <Route path='/' render={(props) => (
                                         <Launcher {...props} URL={this.state.URL}/>
                                        )}/>

(способ передачи функции может меняться в зависимости от того, как вы внедрили маршрутизатор, который вы здесь не показали). Таким образом, функция getURLFromDeveloper () может быть связана с состоянием класса, отображающего маршруты. 

   getURLFromDeveloper(URL){
      this.setState({URL})
   }

Для ясности, родительский элемент обоих этих компонентов имеет URL-адрес переменной состояния, а также функцию getURLFromDeveloper (), которая передается в качестве опоры в компоненте маршрутизатора Developer. Когда URL-адрес изменяется в компоненте разработчика, позвоните 

    this.props.getURL(<new value of the URL>);

это вызовет функцию getURLFromDeveloper для родителя, которая изменит состояние родителя и запустит повторное рендеринг.

Теперь повторное рендеринг будет проходить по пути "/ dev", который является последним путем, который вы нажали в истории, поэтому вам нужно перейти по пути, который отображает компонент Launcher, чтобы получить доступ к новому значению this.props.URL

Редактировать: поскольку у вас есть отдельный файл Routes.js. Вы должны определить функцию getURLFromDeveloper () и состояние «URL», где вы визуализируете компонент Route в вашем приложении. 

    render(){
      return (
          <Routes getURL={this.getURLFromDeveloper} URL={this.state.URL}/>
      )}

In Routes.js 

  const Routes = (props) => (
   <Router>             
      <div>
      <Route component={LauncherApp}/>
          <Switch>
                 <Route exact path='/dev' render={(props) => (
                                     <Developer {...props} getURL={props.getURL}/>
                                    )}/>
                <Route path='/' render={(props) => (
                                     <Launcher {...props} URL={props.URL}/>
                                    )}/>
          </Switch>
     </div>
   </Router>
 );
...