Reactjs 在多个具有不同逻辑的位置使用一个组件（使用formic）

我有一个大的显示组件（react js）

它有几个InputText字段，其逻辑使用

我对在几个地方使用该组件感兴趣

但无论在哪里，我都希望逻辑有所不同

例如，在仅为只读或类似内容的部分中

我想多次使用这个组件，每次都给它一个不同的formic对象

这可能吗

有没有更聪明的办法来解决这个问题

谢谢你找到了

这当然是可能的帮助下

在本例中，我使用了一个组件，每次使用两次，使用不同的逻辑

不同的起始值

不同方案

而onSubmit则不同

附加一个示例代码

 <Component
        initialData={data.own}
        handleSubmit={onSubmitOwn}
        validationSchema={Yup.object().shape({
          username: Yup.string().required("Username is required!")
        })}
  <Component
          initialData={data.tow}
          handleSubmit={onSubmitTow}
          validationSchema={Yup.object().shape({
            password: Yup.string().required("Password is required!")
          })}
        />

---

听起来像是反应模式。容器组件中的逻辑，表示组件中的UI。不同的容器可以渲染相同的表示组件，但传递不同的属性值。棘手的业务是退一步，足够抽象地思考您的UI，而不是简单地公开一堆一次性的用例道具。Dan Abramov的文章也有助于解释。给出一些代码示例。。

export default withFormik({
  mapPropsToValues: props => {
    return {
      username: props.initialData.username
    };
  },

  validationSchema: props => props.validationSchema,

  handleSubmit: (values, { props, setSubmitting }) => {
    props.handleSubmit(values);
  }
})(Component);