尝试在FieldArray react JS中根据条件呈现字段

FieldArray 是 ReactJS 表单库 Formik 中的一个组件，用于处理动态字段数组。它允许我们根据条件动态地呈现字段。

在 FieldArray 中，我们可以使用 map 函数来遍历字段数组，并根据条件渲染相应的字段。以下是一个示例代码：

import { Formik, Field, FieldArray } from 'formik';

const MyForm = () => {
  return (
    <Formik
      initialValues={{ fields: [] }}
      onSubmit={(values) => {
        // 处理表单提交逻辑
      }}
    >
      {({ values }) => (
        <form>
          <FieldArray name="fields">
            {({ push, remove }) => (
              <div>
                {values.fields.map((field, index) => (
                  <div key={index}>
                    <Field name={`fields[${index}]`} />
                    {field === 'condition' && (
                      <Field name={`fields[${index}].additionalField`} />
                    )}
                    <button type="button" onClick={() => remove(index)}>
                      删除字段
                    </button>
                  </div>
                ))}
                <button type="button" onClick={() => push('')}>
                  添加字段
                </button>
              </div>
            )}
          </FieldArray>
          <button type="submit">提交</button>
        </form>
      )}
    </Formik>
  );
};

export default MyForm;

在上面的示例中，我们使用 FieldArray 组件来处理名为 "fields" 的字段数组。通过 map 函数遍历数组中的每个字段，并根据条件渲染相应的字段。在这个例子中，如果字段的值为 "condition"，则会呈现一个额外的字段。

这是一个简单的示例，你可以根据自己的需求进行扩展和修改。如果你想了解更多关于 FieldArray 的用法和参数，可以参考 Formik 官方文档中的相关部分：FieldArray - Formik。

希望这个答案能够帮助到你！如果你对其他问题有任何疑问，请随时提问。