Question

我的react-router应用的每个页面都有此功能。

  submitForm(e) {
    const redirect = this.props.location.query.redirect;
    const age = this.refs.age.value;

    const gender = this.refs.gender.value;

    const ethnicity = this.refs.ethnicity.value;

    if (!age || !gender || !ethnicity) {
      this.props.dispatch(
        showError({
          type: 'SHOW_MODAL',
          modalType: 'SHOW_ERROR',
          modalProps: {
            onClose: hideModal,
            text: 'Please complete all fields',
          },
        })
      );
    } else {
      this.props.dispatch(addDetails(age, gender, ethnicity));
      if (redirect) {
        this.props.router.push('6');
      } else {
        this.props.router.push('4');
      }
    }
  }

我是新手做出反应，我怎么能重构这个作为道具传递到每个组件？而不是重复每个组件中的代码。

我可以将它放入自己的helpers文件中吗？

import helpers from './helpers';
import './index.css';
const store = configureStore();
console.log({ store });
render(
    <Provider store={store}>
        <Router history={browserHistory} routes={routes} {...helpers} />
    </Provider>,
    document.getElementById('root')

Answer 1

是。

您需要助手模块导出函数（export default submitForm(e)...）并将其作为<Router ... sumbmitForm={helpers} />

传递给您的组件

您的子组件可以调用this.props.submitForm（）。

您还需要确保将其传递给链中的每个子组件。

我如何重构我的功能？

1 个答案: