Question

这是组件结构的摘要。

ListItemComponent组件包含 SubwayFormView组件，当我单击屏幕上的按钮时，该组件会显示一个模式。

SubwayFormView组件通过Route连接 FormContainer组件和另一个组件， FormComponent组件连接到 FormContainer组件具有连接功能。

这是代码：

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 Component 获得的所有信息作为道具的地方，但是很难弄清楚如何传递道具在 SubwayFormView组件中进行路由，并将 FormContainer组件中的功能连接到 FormComponent组件。

Answer 1

您应该像这样在SubwayFormView组件中使用渲染

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

如何通过路线和容器组件传递道具？

1 个答案: