在 ReactJS 中路由后从子组件获取值

Question

我是新手，目前我被困在一个我有 2 个组件的场景中，

1. 启动器组件
2. 开发者组件

在此，Launcher 组件首先被调用。从按钮单击它路由到 Developer 组件。我想在路由之后将一个值从 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>
     );
  }
      }

开发者.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>

);

当在 Launcher.js 中路由时，我有什么方法可以从开发者组件中获取值 'url'

Answer 1

一种可能的方法是使用 redux，但您没有指定要使用它。 所以你可以使用其他方式，我通常不会喜欢 redux。 您可以在路由器中将函数作为道具传递

    <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()，它作为一个 prop 在 Developer 的路由器组件中传递。当 Developer 组件中的 URL 发生变化时，调用

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

这将调用父级的 getURLFromDeveloper 函数，该函数将更改父级的状态并开始重新渲染。

现在重新渲染将在路径“/dev”上，这是您在历史记录中推送的最后一个路径，因此您必须转到渲染 Launcher 组件的路径才能访问 this.props.URL 的新值

编辑：因为您有一个单独的 Routes.js 文件。您必须定义 getURLFromDeveloper() 函数和在您的应用中呈现 Route 组件的状态“URL”。

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

在 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>
 );