Как передать Props другому компоненту с помощью React-Router Redirect - PullRequest
Новая
       16

Как передать Props другому компоненту с помощью React-Router Redirect

0 голосов
/ 30 апреля 2018

У меня есть чистое приложение React (без контейнера внешних состояний), в котором я использую react-router. В этом приложении у меня есть компонент <SearchMain />, который содержит двух дочерних элементов: компонент <Search />, в основном форма, содержащая элементы для выполнения поиска, и компонент <DisplayResults />, который отображает результаты в табличной форме.

Внутри <Search /> компонента У меня есть две кнопки, одна из которых используется для отображения данных в виде таблицы, другая для отображения данных в форме календаря. События onClick двух кнопок связаны с родительским компонентом <Search /> через две функции-стрелки, передаваемые как props, updateTableData и handleShowCalendar.

Обе функции выполняют поиск и сохраняют результат в this.state.searchResults. updateTableData показывает результаты в компоненте <DisplayResults />, handleShowCalendar хочет показать результаты в календаре из другого компонента <DisplayCalendar />, связанного с маршрутом '/ displayCalendar'. Я хотел бы использовать декларативный компонент <Redirect /> вместо использования history.push(). В приведенном ниже решении я могу отправить данные через строку запроса URL-адреса, но это не то решение, которое я ищу, я бы хотел передать такие данные так же, как реквизиты передаются от родительских к дочерним компонентам. Я искал информацию в Интернете, но не смог найти решение своей проблемы. Самое близкое, что я нашел, это использовать 

<Route
  path='/displayCalendar'
  render={(props) => <DisplayCalendar {...props} searchResults={this.state.searchResults} />}
/>

но как я могу программно изменить <Route /> и передать состояние моего компонента по нажатию кнопки, используя <Redirect />? 

export class SearchMain extends React.Component<RouteComponentProps<{}>, State> {

    constructor(props: any)
    {
        super(props);

        this.state = {...};
        ...
    }
        ...
    updateTableData(searchParams: SearchParameters) {
          this.makeRequest(searchParams);
    }

    handleShowCalendar(searchParams: SearchParameters) {
        this.makeRequest(searchParams);
        this.setState({
            ...this.state,
            redirectToCalendar: true
        });
    }

    public render() {
        const { loading, showCalendar, redirectToCalendar, searchResults } = this.state;

        if (redirectToCalendar)
            return (<Redirect to={{
                pathname: '/displayCalendar',
                search: JSON.stringify(this.state.searchResults)
            }} />)

        return (<div>
            <Row>
                <Search search={(searchParams) => 
                  this.updateTableData(searchParams)} showCalendar={(searchParams) => this.handleShowCalendar(searchParams)} />
                {searchResults && <DisplayResults searchResults={searchResults} /> }
                </Row>
           </div>);
    }
...