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;
  • 相关阅读:
    第十三周总结
    第一阶段意见评论
    第十二周总结
    关于transform的3D变形函数
    12.9学习内容
    12.8学习的内容
    这是自己的第一篇博客
    食物链
    poj1988Cute Stacking
    银河英雄传说
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8035752.html
Copyright © 2011-2022 走看看