react简单入门-自定义组件的子组件渲染（类比vue的匿名插槽和具名插槽）

前言：首先在react中是没有插槽的概念的，但是可以类比vue或者其他组件库中“槽”的概念，官方解释：

案例：

“匿名插槽：”

根组件：

父组件：

效果展示：

经观察发现，这个<Fu>...</Fu>组件内部不管写什么，并在函数里面以{props.children}的形式去接收，就可以直接渲染了

“具名插槽：”

根组件：

Fu组件：

展示效果：

经观察，如果是需要类似具名插槽的效果的话，都是在组件标签上加上自定义属性就行了，而这个自定义属性的值是个符合jsx语法即可，未来传个函数就行，实质上jsx它最终返回的就是一个对象（虚拟dom），咱们看下打印结果就行：

总结：

不同点：区别就是前者是直接写在标签内部，然后用props.children接收，而后者则是要放在标签中，以属性的形式传入，而在起内部则用props.属性名的形式去放自己想要放在的地方即可；

共同点：都是通过jsx语法传入，用props接收，本质上都会被解析成对象（虚拟dom）。