元素替换
合并 createElement 与 cloneElement 的使用 😉
基本用法
// 标签替换<Element component='span'>text</Element>// 构造函数替换<Element component=Header>text</Element>// 实例替换<Element component=<Link to='/' />>text</Element>
其他用例
一、防止意外属性传递到 DOM 元素
如防止 to
在条件不成立时到传递到 div
标签上:
<Element className=stylescontent component=purchased ? <Link to=`/` /> : 'div'> Live</Element>
二、多个组件共用相同 DOM 元素
如一个组件有 Item > ItemInner 两层结构,Item + Item 有并列样式,ItemInner 有 padding
,需要替换外层的元素为链接时。
// 一种组件两种特性<ListItem component=Link /> // => <a class={ListItem}><div class={ListItemContent}>...</// 夸张的<ListItem component=<Card component=Link /> />// 好玩的<Element component=<Element component=<Element component=<Element component='span' /> /> />>
三、生成容器而不生成 DOM 元素
如实现一个能触发弹层的组件,使它能包装在一个按钮上使用:
// 定义 Tooltipconst Tooltip = <Element component=child> childpropschildren <Popup /> </Element> // 使用 Tooltip<Tooltip> <Button /></Tooltip>
四、自动传播事件
后定义属性覆盖先定义的(class 会始终连接起来),先定义的处理函数先执行:
// 实现方:定义一个切换组件(比「三」更通用的实现):const <Toggle> = ... <Element component=child onClick=handleClick // 自动传播的 onClick > childpropschildren <Element component=popup isOpen=isOpen // 覆盖的属性,控制了 popup 显示 onOpen=handleOpen // 自动传播的 onOpen /> </Element> // 调用方:无论内外(调用方或实现方),属性都会传递,事件都会触发<Toggle popup=<Tooltip placement='top' onOpen={} />> <Button ghost onClick={} /> // 先执行的 onClick</Toggle>
FAQ
ref
处理
// 原生标签使用 `onRef` 获取元素引用<Element component='span' onRef= ... />// 构造函数和实例也能自动传递 `onRef` —— Element 会传递任意的 `on***` handler<Element component=MyComponent onRef=handleRef />
component={null}
的含义是什么?
返回 children,不生成容器元素:
<Element component=null> <span>span</span></Element>