组件适配器应仅包装组件，还是还应包装<Field>

Question

包装反应最终形式组分的最佳概念

背景

我正在使用react-native，一旦我把头缠好了，可能会开始使用react-final-form。我将基于react-native-paper建立一个组件库。

我在包装3：第三方组件以用作反应最终形式字段（即<Field>）时看到的所有示例都没有包装实际的字段组件。而是通过component组件的Field属性注入包装的组件。

如果我正在完成所有包装组件的工作，为什么不一直这样做呢？由于我还没有找到“完全包装”的示例，因此我有点担心这不是一个好主意。

两个解决方案似乎都可以正常工作，顺便说一句。下面的代码是psuedo：ish。

仅包装组件

export default function App() {
  const CheckboxAdapter = ({input: {onChange, value}, meta}) => (
    <Checkbox
      status={value}
      onPress={() => {
        onChange(value === 'checked' ? 'unchecked' : 'checked');
      }}
      errorText={meta.touched ? meta.error : ''}
    />
  );

  return (
    <Form
      ..
      render={({handleSubmit}) => {
        return (
          ..
           <Field
             name="myFieldname"
             component={CheckboxAdapter}
           />
        )
      }
    />
  )
}

将组件包装在<Field>组件内部

export default function App() {
  const MyCheckbox = ({name}) => (
    <Field
      name={name}
      component={({input: {onChange, value}, meta, children, ...rest}) => (
        <Checkbox
          status={value}
          onPress={() => {
            onChange(value === 'checked' ? 'unchecked' : 'checked');
          }}
          errorText={meta.touched ? meta.error : ''}
        />
      )};
    />
  );

  return (
    <Form
      ..
      render={({handleSubmit}) => {
        return (
          ..
           <MyCheckbox
             name="myFieldname"
           />
        )
      }
    />
  )
}

Answer 1

对该问题兴趣不大。我最后也包装了<Field>。这样可以使表单代码更具可读性。

import React from 'react';
import TextInput from '../components/TextInput';
import {Field} from 'react-final-form';

const TextInputAdapter = ({input, meta, ...rest}) => {
  const onChangeText = value => {
    input.onChange(value);
  };

  return (
    <TextInput
      {...input}
      {...rest}
      onChangeText={onChangeText}
      errorText={meta.touched ? meta.error : ''}
    />
  );
};

const TextInputField = ({...rest}) => {
  return <Field component={TextInputAdapter} {...rest} />;
};

export default TextInputField;