Question

我一直在阅读，如果有疑问，我应该把一个元素变成一个组件。那么将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> ) }等表单元素转换为组件实际上有什么好处。

请考虑以下事项：

<TextInput/>

除非我使用autoCorrect，autoCapitalize等选项，否则拼写检查通过将输入包装到{{1}}等组件并将其导入各种表单而保存的唯一内容不是添加类型支持每个输入，也许是输入错误未在表单顶部声明的事实。

还有什么我想念的吗？什么是最有效的方法来解决这些表单元素以及为什么？

Answer 1

我使用styled-components并且一直这样做。使用样式化组件的基本思想是，您将CSS样式附加到组件，而不是创建要定位的CSS类，例如，所有input元素或使用inline styles限制你能做什么（即媒体查询，伪选择器等）。它允许您将组件功能与其显示（在同一文件中）分开。

以下是有关该主题的YouTube视频的链接：https://www.youtube.com/watch?v=jaqDA7Btm3c

通过这种方式，您可以避免需要一个难以维护的全局CSS文件，并且不能完全适合webpack生态系统，该生态系统将您的资源视为依赖关系图

如果您对styled-components不感兴趣，并且对表单元素的样式感到满意，那么我认为没有理由创建自定义Input组件。

例如，在Facebook关于React表单的文档中，他们不创建自定义表单组件。

https://facebook.github.io/react/docs/forms.html

相依：

如果您还不知道，可以这样编写示例：

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

（删除了单个参数周围的()，删除了{}和return语句。就像我说的那样，无关，但我想如果你不知道我会提到它

Answer 2

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

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

当你开始觉得某些智能组件中的代码太多，或者一个愚蠢的组件变大时，你可以开始分割它们。否则试着保持简单。

React应该将元素组成一个单独的组件吗？

2 个答案: