React advanced component Render Props

preface

Render props are an effective mode for sharing component logic, which provides better UI flexibility with state and auxiliary parameters.

render funtion

In our components, we all need to define a Render method that defines the part we need to render.

/ / beforerender(){
  const {on} = this.state
  return<Switch on={on} onClick={this.toggle} />} // afterrenderUI() {
  const {on} = this.state
  return <Switch on={on} onClick={this.toggle} />
}
render() {
  return this.renderUI()
}
Copy the code

Optimize the renderUI for pure functions

Independent of the component, the parameters are all passed in

const renderUI = ({on, toggle}) => <Switch on={on} onClick={toggle} />
render() {return this.renderUI({
        on:this.state.on,
        toggle:this.toggle
    })
}
Copy the code

Moving out of external use is still possible

// const renderUI = ({on, Toggle}) => <Switch on={on} onClick={toggle} /> // componentclass toggle extend React.Component{state ={on:false} toggle = ()=> this.setState( ({on}) => ({on:! On}), () = > {this. Props. OnToggle (this) state) on)}) / / componentrender() {return this.renderUI({
        on:this.state.on,
        toggle:this.toggle
    })
}

}
Copy the code

Defining the Default configuration

So based on the above knowledge, we can further render component parts through attributes. Set a default property.

static defaultProps = {renderUI}
render() {return this.props.renderUI({
        on:this.state.on,
        toggle:this.toggle
    })
}
Copy the code

Custom extension configuration

After defining that the Render part can rely on the external Render attribute, we can customize the render and add any render DOM we want. We define a Usage method.

In this approach, we have the flexibility to add custom renderings to the original components according to our own needs.

function Usage({
    onToggle = (aregs) => console.log('Ontoggle'. aregs) }){return ( <Toggle onToggle={onToggle} renderUI = {(on,toggle)=>(
     <div>
       { on ? 'button is on' : 'button is off'}
       <Switch on={on} onClick={toggle} />
       <button onClick={toggle}>{on? 'on': 'off'}</button>
     </div>
    )
        
    }>
    </Toggle>)
}
Copy the code

Props. Children is also ok

If you don’t think this is a good idea, you can also customize the render part using children.

// Class Toggle extends React.Component{render(){
        this.props.children({
            on:this.state.on,
            toggle:this.toggle
        })
    }
}
function Usage({
    onToggle = (aregs) => console.log('Ontoggle'. aregs) }){return (<Toggle onToggle={onToggle}  >
        {(on,toggle)=>(
     <div>
       { on ? 'button is on' : 'button is off'}
       <Switch on={on} onClick={toggle} />
       <button onClick={toggle}>{on? 'on': 'off'}</button>
     </div>
    )
        
    }
    </Toggle>)
}
Copy the code

Deconstruct a common toggle component to use

function CommonToggle(props) {
  return( <Toggle {... props}> {({on, toggle}) => <Switch on={on} onClick={toggle} />} ) }Copy the code

summary

So that’s the render props mode for further general knowledge of the UI rendering parts of shared components. Hope in our business component or UI component, can adjust flexibly according to their own needs oh.