react進階元件之Render Props小結

RobinsonZhang發表於2019-03-01
React元件

前言

Render props作為共享元件邏輯的一種有效模式，此模式藉助state和輔助引數，可以提供ui的更好的靈活性。

render funtion

在我們的元件中，我們都需要定義一個render方法，在這個方法中定義我們需要渲染的部分。

// 之前

render(){
  const {on} = this.state
  return <Switch on={on} onClick={this.toggle} />
}
// 之後
renderUI() {
  const {on} = this.state
  return <Switch on={on} onClick={this.toggle} />
}
render() {
  return this.renderUI()
}
複製程式碼

優化renderUI為純函式

不依賴於元件，引數全部依賴傳入

const renderUI = ({on, toggle}) => <Switch on={on} onClick={toggle} />
render(){
    return this.renderUI({
        on:this.state.on,
        toggle:this.toggle
    })
}
複製程式碼

移出外部使用仍然是可以的

// 元件外
const renderUI = ({on, toggle}) => <Switch on={on} onClick={toggle} />

// 元件
class Toggle extend React.Component{
state = { on :false}
toggle = ()=>
    this.setState(
    ({on}) => ({on:!on}),
    () =>{
        this.props.onToggle(this.state.on)
        }
    )
// 元件內
render(){
    return this.renderUI({
        on:this.state.on,
        toggle:this.toggle
    })
}

}
複製程式碼

定義預設配置

那麼基於以上的認知，我們可以進一步把渲染元件的部分通過屬性得到。設定一個預設屬性。

static defaultProps = {renderUI}
render(){
    return this.props.renderUI({
        on:this.state.on,
        toggle:this.toggle
    })
}
複製程式碼

自定義擴充配置

在定義好render部分可以依賴於外部render屬性之後，我們可以自定義渲染，加入自己想要的渲染dom。我們定義一個Usage的方法。

在這個方法中，我們可以更加靈活的根據自己的需求，在原來的元件基礎上加上自己需要的自定義渲染。

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>)
}
複製程式碼

props.children 也是可以的

如果你覺得上面的方式不是很好，你也可以通過children的方式來自定義使用render的部分。

// 元件內
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>)
}
複製程式碼

解構出一種常用的toggle元件使用

function CommonToggle(props) {
  return(
    <Toggle {...props}>
      {({on, toggle}) => <Switch on={on} onClick={toggle} />}
  )
}
複製程式碼

小結

以上就是關於render props模式關於共享元件ui渲染部分的進階常識，你Get了麼？希望在我們業務元件或者ui元件的時候，能根據自己的需求靈活的調整哦。

相關文章