Как я могу передать реквизит через Route и контейнерный компонент?

Question

Вот краткое описание структуры компонентов.

Компонент ListItemComponent содержит Компонент SubwayFormView , который показывает модальное значение, когда я нажимаю кнопку на экране.

Компонент SubwayFormView соединяет Компонент FormContainer через Маршрут и другой компонент, Компонент FormComponent подключается к Компонент FormContainer t с функцией соединения.

Вот код:

Компонент ListItemComponent

 <ModalBody>
    <SubwayFormView title={'Edit Subway Line'} editName={subway.name} editImage={subway.image} />
 </ModalBody>

Компонент SubwayFormView

 public render() {
    return (
      <Provider store={this.store}>
        <ConnectedRouter history={this.history}>
          <div>
            <Route path={'/SubwayLine'} component={FormContainer} />
          </div>
        </ConnectedRouter>
      </Provider>
    );
  }

Компонент FormContainer

const SubwayLineReduxForm = reduxForm({
  form: EDIT_SUBWAYLINE_REDUX_FORM,
  onSubmit,
  validate,
  initialValues: { imageDir: uuidv4() },
})(FormComponent);

const selector = formValueSelector(EDIT_SUBWAYLINE_REDUX_FORM);

const mapStateToProps = (state: IConsultScheduleViewStore, ownProps: IFormContainerProps) => ({
  createSubwayLineList: state.createSubwayLineList,
  updateSubwayLineList: state.updateSubwayLineList,
  val: selector(state, 'imageDir'),
});

const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
  loadSubwayLine: (id: string) => dispatch(loadSubwayLine(id)),
  setSubwayLine: () => dispatch(setSubwayLine()),
  initializeSubwayLineForm: (data: Partial<IConsultDto>) => dispatch(initialize(EDIT_SUBWAYLINE_REDUX_FORM, data)),
  ...bindActionCreators({ push }, dispatch),
});

const mergeProps = (stateProps: any, dispatchProps: any, ownProps: any) => ({
  ...ownProps, ...stateProps, ...dispatchProps,
});

const FormContainer = connect(
  mapStateToProps,
  mapDispatchToProps,
  mergeProps,
)(SubwayLineReduxForm);

Компонент FormComponent

<SubtitleWrapper>
   <h5>Edit Subway Line</h5>
</SubtitleWrapper>
        <form onSubmit={handleSubmit} role="form">
          <ContentWrapper>
            <div className="row">
              <div className="col-sm-12">
                <InputField
                  name="subwayLineName"
                  component={input}
                  {...{
                    label: 'Subway Line',
                    type: 'text',
                    placeholder: 'Please enter a Subway Line.',
                  }}
                />
              </div>
            </div>
          </ContentWrapper>
      </form>

Компонент FormComponent - это место, где я хочу показать всю информацию, получаемую от Компонент ListItemComponent в качестве реквизита, но довольно сложно понять, как передавать реквизиты через Route в Компонент SubwayFormView и функция подключения в Компонент FormContainer до Компонент FormComponent .

Answer 1

Вы должны использовать рендер в SubwayFormView Component как этот

<Route path={'/SubwayLine'} render={() => <FormContainer prop={propName} />} />