zoukankan      html  css  js  c++  java
  • [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>
        )
      }

  • 相关阅读:
    学到的一种编程风格
    防止忘记初始化NSMutableArray的方法
    == 和 isEqualToString的区别之备忘
    IOS开发中--点击imageView上的Button没有任何反应
    [__NSCFString absoluteURL]错误的解决方案
    二叉树镜像
    判断树的子结构
    算法练习-贪心问题
    重建二叉树:
    IDEA搭建web项目出现中文乱码问题
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8030709.html
Copyright © 2011-2022 走看看