首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React展示组件与容器组件(英译)

译自react-js-presentational-container-components,by Krasimir Tsonev. 当我们开始使用React时,我们很快会开始遇到疑惑。...让我们从一个简单的例子开始,说明问题,然后将组件拆分为容器和展示组件。 我们将使用一个 clock 组件。 它接受一个Date对象作为prop,并显示实时变化的时间。...它们接收信息并对其进行格式化,以便由展示组件简单地使用。 通常我们使用高阶组件(higher-order components)来创建容器。 它们的render方法仅包含展示组件。...下面是我们的ClockContainer: // Clock/index.js import Clock from '....最终渲染到展示组件并传递小时,分钟和秒三个数字。 ####展示组件 展示组件是与展示的东西样子相关的。 他们有着让页面变得漂亮所需的额外的修饰。这样的组件不绑定任何东西,并且没有依赖性。

88010
您找到你想要的搜索结果了吗?
是的
没有找到

React 展示组件与容器组件(英译)

作者:kurtshen 译自react-js-presentational-container-components,by Krasimir Tsonev....让我们从一个简单的例子开始,说明问题,然后将组件拆分为容器和展示组件。 我们将使用一个 clock 组件。 它接受一个Date对象作为prop,并显示实时变化的时间。...它们接收信息并对其进行格式化,以便由展示组件简单地使用。 通常我们使用高阶组件(higher-order components)来创建容器。 它们的render方法仅包含展示组件。...下面是我们的ClockContainer: // Clock/index.js import Clock from '....最终渲染到展示组件并传递小时,分钟和秒三个数字。 展示组件 展示组件是与展示的东西样子相关的。 他们有着让页面变得漂亮所需的额外的修饰。这样的组件不绑定任何东西,并且没有依赖性。

2.7K00

优秀组件设计的关键:自私原则

当把组件从设计转化为开发时,常常会发现一些属性与内容有关,而与组件本身无关。这种考虑周到的组件设计方法导致了复杂的属性、更陡峭的学习曲线和最终的技术债务。...然而,避免这些陷阱的关键是自私或自我利益为中心的组件设计。 在开发新功能时,是什么决定了现有组件是否可行?当一个组件不能使用时,这究竟意味着什么?...考虑的迭代 也许,展示一个体贴的组件的最好方式是通过走过一个组件的生命周期。我们将能够看到它们是如何开始时很小,功能很强,但一旦设计发展起来就会变得很笨重。...迭代1 虽然这些样本设计相当简陋,比如没有显示各种:hover、:focus和 :disabled状态,但它们确实展示了一个有两种颜色主题的简单按钮。...让我们超越Button,进入自私的组件设计的基石。 自私设计的关键 与创造一个虚构的人物时一样,最好是向读者展示,而不是告诉他们,他们是自私的。通过阅读人物的思想和行动,可以了解他们的个性和特征。

1.8K30

微信小程序官方组件展示之表单组件form源码

以下将展示微信小程序之表单组件form源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档。功能描述:表单。...当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。...form 组件可以识别这些自定义组件,并在 submit 事件中返回组件的字段名及其对应字段值。这将为它添加以下两个属性。...使 form 组件可以识别到这个自定义组件内部的所有表单控件。...使 form 组件可以识别到这个自定义组件内部的 button , 如果自定义组件内部有设置了 form-type 的 button ,它将被组件外的 form 接受。

85250

微信小程序官方组件展示之表单组件button源码

以下将展示微信小程序之表单组件button源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档。 功能描述: 按钮。...,点击分别会触发 form 组件的 submit/reset 事件 1.0.0 合法值 说明 submit 提交表单 reset 重置表单 open-type string...详情新版接口使用指南 5.tip: 从 2.1.0 起,button 可作为原生组件的子节点嵌入,以便在原生组件上使用 open-type 的能力。...6.tip: 目前设置了 form-type 的 button 只会对当前组件中的 form 有效。...因而,将 button 封装在自定义组件中,而 form 在自定义组件外,将会使这个 button 的 form-type 失效。

75430
领券