React入门8-复合组件

1. 匿名插槽 ---> 类似于 vue 中的v-slot

function Dialog(props) {return <div style={{ border: "1px solid blue" }}>{props.children}</div>
}
export default function Composition() {return (<div><Dialog><h1>组件复合</h1><p>复合组件给与你足够的敏捷去定义自定义组件的外观和行为</p></Dialog></div>)
}

2. 具名插槽-----> 类似于vue 中的v-slot:footer

function Dialog(props) {return <div style={{ border: "1px solid blue" }}>{props.children.default}<div>{props.children.footer}</div></div>
}
export default function Composition() {return (<div><Dialog>{{default: (<frameElement><h1>组件复合</h1><p>复合组件给与你足够的敏捷去定义自定义组件的外观和行为</p></frameElement>),footer: (<><button onClick={() => alert("react确实好")}>确定</button></>)}}</Dialog></div>)
}

3. 作用域插槽----> 类似于vue 中的v-slot:footer="ctx"

function Dialog(props) {// 备选消息const messages = {"foo": {title: 'foo', content: 'foo11111~'},"bar": {title: 'bar', content: 'bar~'},}// 执行函数获得要显示的内容const {body, footer} = props.children(messages[props.msg]); return <div style={{ border: "1px solid blue" }}>{body}<div>{footer}</div></div>
}
export default function Composition() {return (<div>{/* 执行显示消息的key */}<Dialog msg="foo">{({title, content}) => ({body: (<><h1>{title}</h1><p>{content}</p></>),footer: <button onClick={() => alert("react确实好")}>确定</button>})}</Dialog></div>)
}

React入门8-复合组件相关推荐

React 入门：受控组件与非受控组件
文章目录非受控组件概念介绍示例代码受控组件什么是受控组件示例代码代码优化首先说明,我们基于表单数据的处理方式来理解受控组件与非受控组件. 非受控组件概念介绍非受控组件中,表单数据将 ...
react --- 复合组件,传递属性
组件复合复合组件给予你足够的灵活去定义组件的外观和行为,而且是以一种明确和安全的方式进行. 如果组件间有公用的非UI逻辑,将它们抽取为JS模块导入使用而不是继承它 /src/components/C ...
react基础入门，类组件和函数组件，state，props，refs
React入门目录 React入门 React入门 Vue跟React的异同点相同点不同点 Vue小建议 1. 不需要响应式的数据应该怎么处理? 2. Key 3. 数据结构 React 教程 ...
React入门实战——腾讯掌上道聚城主页组件开发
前言 React作为前端使用频率最高的三大框架之一,组件化是其核心思想.对于学习过React的前端小伙伴来说,React中一切都是组件(相信大家都耳熟能详).下面将介绍本人实战项目中对复杂组件的组件化 ...
React初体验-Hello React的组件化方式-React入门小案例
文章目录 React初体验 Hello React案例演练 Hello React案例升级 Hello React的组件化组件化的方式数据依赖事件绑定其他案例练习电影列表展示计数器的案例 ...
react入门代码_如何在React中构建温度控制应用程序-包括提示和入门代码
react入门代码我们正在建立的 (What we're building) In this beginner React project, we're going to learn how to ...
React入门看这篇就够了
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 很多值得了解的细节. 原文:React入门看这篇就够了作者:Random Fundebug经授权转载,版权归原作者所 ...
《慕课React入门》总结
React 入门与实战 react组件虚拟DOM的概念这是React性能高效的核心算法 React为此引入了虚拟DOM(Virtual DOM)的机制.基于React进行开发时所有的DOM构造都是 ...
React入门指引与实战
React是Facebook公司推出的前端组件化解决方案,目的在于解决前端开发中存在的各个痛点.目前,前端框架与库层出不穷,形成了异常繁荣的局面,那么Facebook为何还要重复造轮子呢?究其原因,F ...
React 入门手册
大家好,我是若川.推荐这篇可收藏的React入门手册.也推荐之前一篇类似的文章<如何使用 React 和 React Hooks 创建一个天气应用>. 点击下方卡片关注我.加个星标 Rea ...

React入门8-复合组件

React入门8-复合组件相关推荐

最新文章

热门文章