zoukankan      html  css  js  c++  java
  • [React] Use Prop Collections with Render Props

    Sometimes you have common use cases that require common props to be applied to certain elements. You can collect these props into an object for users to simply apply to their elements and we'll see how to do that in this lesson.

    We have 'button' and 'Switch' component which shares same attrs:

        <Toggle
            onToggle={(on) => console.log("Toggle", on)}
            render={({on, toggle}) => (
                <div>
                    {on
                        ? 'The button is on'
                        : 'The button is off'
                    }
                    <Switch on={on} onClick={toggle} aria-expanded={on}/>
                    <hr />
                    <button onClick={toggle} aria-expanded={on}>
                        {on ? 'on': 'off'}
                    </button>
                </div>
            )}
        />;

    We can pass the same props from the render props:

        <Toggle
            onToggle={(on) => console.log("Toggle", on)}
            render={({on, toggle, toggleProps}) => (
                <div>
                    {on
                        ? 'The button is on'
                        : 'The button is off'
                    }
                    <Switch on={on} {...toggleProps} />
                    <hr />
                    <button {...toggleProps}>
                        {on ? 'on': 'off'}
                    </button>
                </div>
            )}
        />;
    import React from 'react';
    
    class Toggle extends React.Component {
    
      // An empty function
      static defaultProps = {onToggle: () => {}};
    
      // default state value
      state = {on: false};
    
      // toggle method
      toggle = () =>
        this.setState(
          ({on}) => ({on: !on}),
          () => {
            this.props.onToggle(this.state.on)
          }
        );
    
      render() {
        return this.props.render({
            on: this.state.on,
            toggle: this.toggle,
            toggleProps: {
                'aria-expanded': this.state.on,
                onClick: this.toggle,
            }
        });
      }
    }
    
    export default Toggle;
  • 相关阅读:
    on、where、having的区别(转载)
    Javascript 中的非空判断 undefined,null, NaN的区别
    SRM 223 Div II Level Two: BlackAndRed,O(N)复杂度
    ibatis通过Map封装参数调用存储过程
    NoSQL架构实践
    js实现密码强度验证
    ubuntu 10.04安装qtcreator并汉化
    2017第19周一
    越挫越战,越战越勇
    2017第18周六
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8035752.html
Copyright © 2011-2022 走看看