@babel/plugin-transform-react-jsx-refff

before

const Playground = () => {
  const data = {};

  return (<Form
    data={data}
  >
    {/* Goods */}
    <Field path="string">
      <Input></Input>
    </Field>
    <Field path={data.property}>
      <Input></Input>
    </Field>
    <Field path={`template[${index}]property`}>
      <Input></Input>
    </Field>
    <Field path={[data.start, data.end]}>
      <DatePicker></DatePicker>
    </Field>
    <Field path={[data.start, data.end]}>
      <DatePicker></DatePicker>
    </Field>
    <Field path={{ province: data.p, city: data.c, dist: data.p }}>
      <PDCSelector></PDCSelector>
    </Field>
    <Field
      path={{ complex: `[${index}].attr`, string: data.any}}
    >
      <Input></Input>
    </Field>
    <Field
      path={[`[${index}].attr`, data.other]}
    >
      <Input></Input>
    </Field>
    {/* Bads */}
  </Form>)
}

after

const Playground = () => {
  const data = {};
  return React.createElement(Form, {
    data: data
  }, React.createElement(Field, {
    path: "string"
  }, React.createElement(Input, null)), React.createElement(Field, {
    path: "property"
  }, React.createElement(Input, null)), React.createElement(Field, {
    path: `template[${index}]property`
  }, React.createElement(Input, null)), React.createElement(Field, {
    path: [[0, "start"], [1, "end"]]
  }, React.createElement(DatePicker, null)), React.createElement(Field, {
    path: [[0, "start"], [1, "end"]]
  }, React.createElement(DatePicker, null)), React.createElement(Field, {
    path: [["province", "p"], ["city", "c"], ["dist", "p"]]
  }, React.createElement(PDCSelector, null)), React.createElement(Field, {
    path: [["complex", `[${index}].attr`], ["string", "any"]]
  }, React.createElement(Input, null)), React.createElement(Field, {
    path: [[0, `[${index}].attr`], [1, "other"]]
  }, React.createElement(Input, null)));
};