组件适配器应该只包装组件还是应该包装 <Field>

Question

包装 react-final-form 组件的最佳概念

背景

我正在使用 react-native，并且可能会在我完全了解它后立即开始使用 react-final-form。我会基于react-native-paper搭建一个组件库

我看到的所有包装 3:rd 方组件以用作反应最终表单字段（即 <Field>）的所有示例都没有包装实际的字段组件。而是通过 Field 组件的 component 属性 注入包装组件。

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

顺便说一句，这两种解决方案似乎都可以正常工作。下面的代码是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;