React Formik教程系列之七：构建可重用组件

在使用React进行开发的时候，如果是简单的表单还好。如果遇到复杂的表单，比如分好几个步骤的表单，联动效果的字段，多层结构的字段等等，就需要一个好的框架的支持了。在使用Formik进行开发的时候，需要考虑是否可以构建自己的组件库，以便在不同表单中重用。同时，在和不同UI框架结合的时候，可以考虑创建不同的组件，以便重用。

FormikControl

FormikControl相当于一个总控程序，这里通过传递过来的props来决定使用哪个子组件：

import React from "react";
import Input from "./Input";
import RadioButton from "./Treeview";

export default function FormikControl(props) {
  const { component, ...rest } = props;
  switch (component) {
    case "input":
      return <Input {...rest} />;
    case "treeview":
      return <Treeview {...rest} />;
    default:
      return null;
  }
}

FormikContainer

在调用相应子组件时，可以将对应组件的名字通过’component’属性传递给FormikControl:

<FormikControl
  component="treeview"
  label="Products"
  name="products"
  items={items}
/>