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>
)
}

[React] Write Compound Components的更多相关文章

  1. [React] Prevent Unnecessary Rerenders of Compound Components using React Context

    Due to the way that React Context Providers work, our current implementation re-renders all our comp ...

  2. [React] Make Compound React Components Flexible

    Our current compound component implementation is great, but it's limited in that users cannot render ...

  3. [React] Validate Compound Component Context Consumers

    If someone uses one of our compound components outside the React.createContext <ToggleContext.Pro ...

  4. 【转】Facebook React 和 Web Components(Polymer)对比优势和劣势

    原文转自:http://segmentfault.com/blog/nightire/1190000000753400 译者前言 这是一篇来自 StackOverflow 的问答,提问的人认为 Rea ...

  5. Facebook React 和 Web Components(Polymer)对比优势和劣势

    目录结构 译者前言 Native vs. Compiled 原生语言对决预编译语言 Internal vs. External DSLs 内部与外部 DSLs 的对决 Types of DSLs - ...

  6. [Angular] Write Compound Components with Angular’s ContentChild

    Allow the user to control the view of the toggle component. Break the toggle component up into multi ...

  7. [React Fundamentals] Composable Components

    To make more composable React components, you can define common APIs for similar component types. im ...

  8. [React] Higher Order Components (replaces Mixins)

    Higher order components will allow you to apply behaviors to multiple React components. So the idea ...

  9. [React] React Router: Named Components

    In this lesson we'll learn how to render multiple component children from a single route. Define a n ...

随机推荐

  1. HDFS的安全模式

  2. SpringMVC后台使用对象接受参数字符串转日期

    在springMVC配置文件中加入: <bean id="dateConvert" class="com.iomp.util.DateConvert"/& ...

  3. iOS单例创建的一点疑惑

    线程安全的单例常用写法, +(AccountManager *)sharedManager{ static AccountManager *defaultManager = nil; disptch_ ...

  4. bootstrap-treeview简单使用

    废话不多说,直接上干干货. 1.bootstrap-treeview Github网址:https://github.com/jonmiles/bootstrap-treeview 2.使用要求: & ...

  5. net实现ping的方法

    class ServicePinger { private static readonly ILog log = LogManager.GetLogger(typeof(ServicePinger)) ...

  6. 初学者指南:ZFS 是什么,为什么要使用 ZFS?

    作者: John Paul 译者: LCTT Lv Feng 今天,我们来谈论一下 ZFS,一个先进的文件系统.我们将讨论 ZFS 从何而来,它是什么,以及为什么它在科技界和企业界如此受欢迎. 虽然我 ...

  7. git新克隆代码的时候ssh协议

  8. vue-cli生成的模板各个文件详解(转)

    vue-cli脚手架中webpack配置基础文件详解 一.前言 原文:https://segmentfault.com/a/1190000014804826 vue-cli是构建vue单页应用的脚手架 ...

  9. [UVa11549]Calculator Conundrum

    题目大意:有一个只能显示n位数字的计算器,当溢出时只显示最高的n位. 输入k,要你不断平方,问你计算器显示的最大数是多少. 解题思路:这题的示数肯定会循环,那么我们关键就是找什么时候循环了. 可以用F ...

  10. PKU 2411 Mondriaan's Dream 状态DP

    以前做过这题,今天又写了一次,突然发现写了一个好漂亮的DFS……(是不是太自恋了 - -#) 代码: #include <cstdio> #include <cstring> ...