Question

我一直在StackOverflow上/其他地方寻找各种可能的解决方案，但到目前为止，我一直找不到适合我的问题的解决方案。

我看过几篇提到使用Router render方法的文章，但是我似乎无法全神贯注地使用这种方法将方法从单独的组件传递到另一个组件。

例如，我正在尝试将App组件中的方法作为道具传递给我的Form组件。提交Form中的表单时，它应调用传入的方法，并使用表单中的输入来更新App中的状态。

App中的方法称为accountDetails

class App extends React.Component {
  state = {
    username: this.props.location.state.username,
    color: this.props.location.state.color || "red",
    firstName: "",
    lastName: "",
    contact: ""
  };

  toJobBoard = () => {
    this.props.history.push({
      pathname: `jobs/${this.state.username}`,
      state: { username: this.state.username }
    });
  };

  //this is the method I would like to pass into the Form component via Router
  accountDetails = (firstName, lastName) => {
    this.setState({ firstName, lastName });
  };

// + irrelevant code

我的路由器当前的样子，我知道我在render中输入的内容是荒谬的，我现在正在玩弄它。

const Router = () => (
  <BrowserRouter>
    <Switch>
      <Route exact path="/" component={Login} />
      <Route exact path="/page/:usernameId" component={App} />
      <Route
        exact
        path="/page/jobs/:usernameId"
        render={props => (
          <Form {...props} accountDetails={App.accountDetails} />
        )}
      />
    </Switch>
  </BrowserRouter>
);

TLDR；我想使用路由器将一个组件中的方法传递给另一个组件作为道具。在另一个组件中调用该组件时，它应该更新第一个组件中的状态。

-编辑我的路由器是顶级组件。应用程序和表单都是路径。

谢谢！

Answer 1

您的路由器组件位于App组件内部吗？如果是，则只需将该方法作为道具传递给路由器，就可以了。

`const Router = (props) => (

  <BrowserRouter>

    <Switch>

      <Route exact path="/" component={Login} />

      <Route exact path="/page/:usernameId" component={App} />

      <Route exact path="/page/jobs/:usernameId" render={() => ( <Form accountDetails={props.accountDetails} />)}/>

    </Switch>

  </BrowserRouter>

);`

如何通过react-router传递prop方法渲染

1 个答案: