某网络机构2015年回顾

mdsojibahammed3

总之，每次点击日期时，onClick所选 div 的属性都会调用方法HandleClick()，该方法又调用setState()修改组件状态的方法。 每次状态发生变化时，React 都会自动检查render()组件的返回，寻找根据新状态进行更新的内容。如果有，它会自动触发一个新的，render()仅更新已更改的 HTML 片段。 （我必须承认并道歉，在下面的示例中，我还在使用Classnamesrender()的返回之前插入了三行代码，这是一个用于根据状态更改管理 CSS 的小实用程序，只是为了给预览带来一点色彩。我还将使用在最后一个示例中，它用可变数量的盗版者填充预览。这是 GitHub 存储库的链接，其中包含简单明了的使用指南。


） 请参阅CodePen上Makhenzi ( @makhenzi ) 的Pen State2。 现在我们的父组件的状态根据所选日期而变化，是时候创建显示适当的海盗数量和温度的子组件了。 我们在 JSX 文件中实例化它，就像我们对第一个组件所做的那样。然后要将其附加到父级，只需render()使用与任何 HTML 标记 日本手机号码 相同的语法在后者的返回中定义它即可。如果我们称其为“Child”，则在 HTML 块中它将出现在我们插入的位置<Child />。 我们还必须将父组件所拥有的有关当前所选日期的信息以及随之而来的盗版和温度信息传递给子组件。因此，我们诉诸于使用分配给子标签的属性，其名称是任意选择的，其内容是来自父组件的信息。




这样，由于使用了这些“桥属性”或props，子组件将能够在内部访问属于父组件的数据。在我们的示例中，子属性将是this.props.pirates和this.props.temperature，并且将包含取决于父组件当前状态的变量信息。 每当父级的状态发生变化时，子级的 props 的内容也会自动更新。但由于render()子页面显示了道具的内容，因此它也会根据收到的新信息自动更新，遵循线性单向数据流。 请参阅CodePen上Makhenzi ( @makhenzi ) 的Pen Props。 完毕！这些组件相互交互，根据我们的点击在 DOM 中呈现不同的内容，无需刷新，并且全部在一个页面中。在此基础上，交互的复杂性和组件的数量可以根据需要增加，并允许创建复杂而高效的应用程序。