javascript - React 应该将表单元素作为一个单独的组件吗？

Question

我一直读到，当有疑问时，我应该将元素变成组件。那么，转动诸如<input />之类的表单元素实际上有什么好处吗？到组件。

考虑以下因素:

const SomeComp = (props) => {
  return (
    <form className='someClass' onSubmit={props.handleSubmit}>
      <Input
        className='someClass'
        type='text'
        id='someId'
        placeholder='Enter Something'
        onChange={props.handleChange}
        value={props.side}
      />
    </form>
  )
}

除非我使用像 autoCorrect、autoCapitalize、spellCheck 这样的选项，否则我将通过将输入包装到像 <TextInput/> 这样的组件中来保存唯一的东西。将其导入到各种表单中并不是将 type 属性添加到每个输入中，而且可能是输入错误未在表单顶部声明的事实。

我还有什么遗漏的吗？处理此类表单元素的最有益方法是什么？为什么？

Answer 1

通常您不会希望将非常简单的元素(例如输入)转换为单独的组件，除非您期望它们具有一些特殊功能。

最简单的方法是，对于每一种功能需求(例如登录页面)，始终拥有一个用于处理行为和功能的智能组件，以及一个用于显示 ui 元素的dumb组件。

当您开始感觉某些智能组件中的代码太多，或者愚蠢的组件变得很大时，您可以开始划分它们。否则尽量保持简单。