通过 Switch Route 组件传递函数

Question

我想构建一个应用程序，它从子组件收集输入信息并将这些信息提升到我的主应用程序组件。我正在使用具有多个路由的 Switch 来浏览我的问卷。我能够通过我的应用程序传递变量和函数，直到语句。
我的问题：如何将函数或变量传递到我的组件中。

class App extends Component {
    state = {
      date: new Date(),
      machineid: null,
    };

  handleChangeMachine(event) {
    const machineid_temp = event.target.value;
    this.setState({machineid: machineid_temp})
    console.log(machineid_temp)
  }

  render(){
    return (
    <div className="page">
      <Router>
        <Header testvalue="this is working"/>
        <Switch testvalues="this is working">
          <Route testvalues="this is not working" path="/" exact component={Landingpage}/>
          <Route path="/survey" component={Survey}/>
          <Route path="/kontakt" component={Kontakt}/>
          <Route path="/question_one" handleChangeMachine={this.handleChangeMachine}  component={question_one}/> {/* This is not working */}
          <Route path="/question_two" component={question_two}/>
        </Switch>
      </Router>
    </div>
  );
}
}

export default App;

在这种情况下，函数 handleChangeMachine 未正确传递给组件 question_one。有谁知道我该如何解决它？作为 React 初学者，我已经尝试了所有我能理解的东西。

Answer 1

如果你使用的是React-router@v5，你可以这样写你的路线：

<Route path="/question_one">
  <QuestionOne handleChangeMachine={this.handleChangeMachine.bind(this)}
</Route>

请注意 question_one 不是正确的组件名称。

甚至：

<Route
  path="/question_one"
  render={({ match }) => {
    // Do whatever you want with the match...
    return <QuestionOne handleChangeMachine={this.handleChangeMachine.bind(this)} />;
  }}
/>

您可以查看 the documentation 了解更多信息。

这里是a repro on Stackblitz.

Answer 2

试试这个解决方案

class App extends Component {
    state = {
      date: new Date(),
      machineid: null,
    };

  handleChangeMachine(event) {
    const machineid_temp = event.target.value;
    this.setState({machineid: machineid_temp})
    console.log(machineid_temp)
  }

  render(){
    return (
    <div className="page">
      <Router>
        <Header testvalue="this is working"/>
        <Switch testvalues="this is working">
          <Route testvalues="this is not working" path="/" exact component={Landingpage}/>
          <Route path="/survey" component={Survey}/>
          <Route path="/kontakt" component={Kontakt}/>
          <Route path="/question_one">
          <question_one handleChangeMachine={this.handleChangeMachine.bind(this)} /> // rename component with UpperCase and without "_"
          </Route>
          <Route path="/question_two" component={question_two}/>
        </Switch>
      </Router>
    </div>
  );
}
}

export default App;

通过 Switch Route 组件传递函数

Passing function through Switch Route component

routes

function

switch-statement

reactjs