解决渲染道具回调的方法

　　介绍

这期内容当中小编将会给大家带来有关解决渲染道具回调的方法,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

简而言之,只要一个组件中某个属性的值是函数,那么就可以说该组件使用了渲染道具这种技术。听起来好像就那么回事儿,那到底呈现道具有哪些应用场景呢,咱们还是从简单的例子讲起,假如咱们要实现一个展示个人信息的组件,一开始可能会这么实现:

 const PersonInfo=道具=比;(
　　& lt; div>
　　& lt; h2>姓名:{props.name} & lt;/h2>
　　& lt;/div>
　　）;//调用
　　& lt; PersonInfo name=& # 39;网络前端& # 39;/祝辞

如果,想要在PersonInfo组件上还需要一个年龄呢,咱们会这么实现:

 const PersonInfo=道具=比;(
　　& lt; div>
　　& lt; h2>姓名:{props.name} & lt;/h2>
　　& lt; p>年龄:{props.age} & lt;/[比;
　　& lt;/div>
　　）;//调用
　　& lt; PersonInfo name=& # 39;网络前端& # 39;=& # 39;年龄18 & # 39;/祝辞

然后如果还要加上链接呢,又要在PersonInfo组件的内部实现发送链接的逻辑,很明显这种方式违背了软件开发六大原则之一的开闭原则,即每次修改都要到组件内部需修改。

开闭原则:对修改关闭,对拓展开放。

<强>那有什么方法可以避免这种方式的修改呢?

在原生js中,如果咱们调用函数后,还要做些骚操作,咱们一般使用回调函数来处理这种情况。

在反应中咱们可以使用渲染道具,其实和回调一样:

 const PersonInfo=道具=比;{
　　返回props.render(道具);
　　}//使用
　　
　　& lt; PersonInfo
　　name=& # 39;网络前端& # 39;=& # 39;年龄18 & # 39;=& # 39;链接链接# 39;
　　渲染={(道具)=比;{
　　& lt; div>
　　& lt; h2> {props.name} & lt;/h2>
　　& lt; p> {props.age} & lt;/p>
　　& lt; a href=https://www.yisu.com/zixun/眕rops.link“rel="外部nofollow”> 
　　

 const PersonInfo=道具=比;{
　　返回props.children(道具);
　　}；
　　
　　& lt; PersonInfo name=& # 39;网络前端& # 39;=& # 39;年龄18 & # 39;=& # 39;链接链接# 39;比;
　　{(道具)=比;(
　　& lt; div>
　　& lt; h2> {props.name} & lt;/h2>
　　& lt; p> {props.age} & lt;/p>
　　& lt; a href=https://www.yisu.com/zixun/{props.link}>