Я искал различные потенциальные решения в 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;Я хочу передать метод в одном компоненте, в другой в качестве реквизита, используя Router.Когда компонент вызывается в другом компоненте, он должен обновить состояние в первом компоненте.
- редактировать мой Маршрутизатор является компонентом верхнего уровня.Приложение и Форма - оба пути.
Спасибо!