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;
  • 相关阅读:
    GroupCoordinator机制
    Consumer 机制
    Producer机制
    Kafka总体介绍
    为什么使用kafka
    消息队列中点对点与发布订阅区别
    为什么使用消息系统
    人生的诗·290~294节
    唐诗宋词学习·141~145节
    人生的诗·295~299节
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8035752.html
Copyright © 2011-2022 走看看