Question

在阅读this article并编写几个React应用程序后，我仍然不明白为什么“组件”被称为组件。即我知道它是“一段代码”但对我来说，来自C＃和Python的单词“封装”意味着很多。在React中，我看到创建了一个组件“UsernamePasswordComponent”，如下所示：

class UsernamePasswordComponent extends React.Component {
  render() {
    return(
      <div>
        <input type="text" name="username"
          value={this.props.username} onChange={this.props.handlerUsernameFromParentComponent} />
        <input type="password" name="password"
          value={this.props.password} onChange=this.props.handlerUsernameFromParentComponent />
        <button onClick={this.props.handlerClickFromParentComponent}>Login</>
      </div>
    );
}

我被迫将password和username存储在父（通常是root）状态中，我必须在PARENT组件中编写大量垃圾来处理子项的更改事件。我不明白。

最后我有以下问题：

为什么React提供如此难看的双向绑定方法？我喜欢LinkedStateMixin，但它被标记为“已弃用”。为什么???
为什么我必须将paswword和username存储在父级状态中，而不是将其封装在子组件中，并提供一种接口来从中获取数据。或者这个组件可以用更多的反应方式重写并封装一切？

Answer 1

您可以在组件中存储password和username字段。因为与该处理相关的所有内容都是内部组件。父母不在乎。父母只想要凭证的结果。

在您的情况下，您有一个简单的组件，但有更复杂的结构，例如整个表。您不想处理父级中的表状态，因为您不关心。您只想将dataSource传递给TableComponent并让它在那里处理。

定义回调非常好 - 所以你实际上得到了你想要的东西。

为什么React的组件是“组件”？

1 个答案: