[React] Write Compound Components
Compound component gives more rendering control to the user. The functionality of the component stays intact while how it looks and the order of the children can be changed at will. We get this functionality by using the special React.Children.map function to map over the children given to our <Toggle/> component. We map over the children to pass the on state as a prop to its children. We move the visual pieces of the component out into function components and add them as static properties to <Toggle/>.
User has free control how On / Off / Button shows on the page:
<Toggle onToggle={(on) => console.log("Toggle", on)}>
<Toggle.On>
Switch is On!
</Toggle.On>
<Toggle.Button />
<Toggle.Off>
Switch is Off!
</Toggle.Off>
</Toggle>;
Toggle.On, Toggle.Off and Toggle.Button is private components for Toggle:
class Toggle extends React.Component {
// An empty function
static defaultProps = {onToggle: () => {}};
static On = ToggleOn;
static Off = ToggleOff;
static Button = ToggleButton;
....
}
All those components have props, which user doesn't need to care about, those props should be passed down fromt the parent component: Toggle:
const ToggleOn = ({on, children}) => {
if(on) {
return (<div>{children}</div>)
} else {
return null;
}
};
const ToggleOff = ({on, children}) => {
if(on) {
return null;
} else {
return (<div>{children}</div>);
}
};
const ToggleButton = ({on, toggle, ...props}) => (
<Switch on={on} onClick={toggle} {...props} />
);
This can be done by using React.Children.map and React.cloneElement:
render() {
const {on} = this.state;
const children = React.Children.map(
this.props.children,
(child) => React.cloneElement(child, {
on: this.state.on,
toggle: this.toggle
})
);
return (
<div> {children} </div>
)
}
最新文章
- 利用firebug调试功能辅助了解闭包和this
- 深入理解js——作用域
- 使用dynamic类型改进反射
- 如何正大光明的使用 google 进行搜索
- word2007里插入分节符
- UCOS2_STM32F1移植详细过程（三）
- 谷歌chrome浏览器桌面提醒 webkitNotifications
- DOCKER脚本一例---快速建立大批测试机
- java 图片高保真缩放
- underscore.js,js工具库
- NancyFx 2.0的开源框架的使用-AspnetBootstrapping
- Oracle函数之chr
- Springboot security cas整合方案-原理篇
- 芝麻HTTP：代理的基本原理
- 逆向与Bof基础
- 《java入门第一季》之面向对象（如何使用帮助文档）
- MATLAB多项式运算
- Linux - 快速进入目录的方法
- mac电脑读写NTFS格式的移动硬盘命令
- IDEA实现序列号接口