react数据单向流、受控组件、子父组件通信

版权声明:这篇文章是博客作者的原创文章。,未经博主许可,不得擅自转载。。

父子组件数据传输模式:

1。通过道具

2。通过内部HTML(),当期望在父组件中通过子组件的实例DOM传递一些静态的DOM节点或innerHTML的时候可以使用

react数据单向流:子代组件之间的通信(数据传输)规则,原则:数据只能从父组件传递到子组件。,而不能由子组件直接修改父组件的数据,谁属于数据谁有权修改它?;

因此子组件需要修改父组件数据。,最好通知父组件修改父组件。,在下面的代码示例中,单行文本框输入以初始默认值设置。,这个值由父组件传递。,此时,窗体的值值由组件控制。,被控元件;同时,如果不为该窗体组件绑定长葛事件,,这时,您需要用子组件更新父组件状态。,父组件需要将回调函数传递给子对象。,子组件调用,回调函数接收数据修改窗体的值


登录后单击。:

再说裁判。,下面的一些正在使用中。 refs 的场景:

  • 加工焦点、文本选择或媒体播放
  • 触发强制动画
  • 集成第三方DOM库

如果可以通过陈述式方法来实现,尽量避免使用它们。 refs 。

REF属性也可以传递一个函数。,函数的第一个参数是默认DOM节点。,可以自定义函数内的属性。,比如:

    ref=(input=>)

然后,可以替换上面的.CopuSuPut.Copy()。

发表评论

电子邮件地址不会被公开。 必填项已用*标注