复合组件(Compound Component)

使用 static 来复合组件

优点如下:

  • 结构更加清晰
class Toggle extends React.Component {
static On = ({on, children}) => on ? children : null
static Off = ({on, children}) => on ? null : children
static Button = ({on, toggle}) => <Switch on={on} onClick={toggle} />
state = {on: false}
toggle = () =>
this.setState(
({on}) => ({on: !on}),
() => this.props.onToggle(this.state.on),
)
render() {
return React.Children.map(this.props.children, reactElement => {
return React.cloneElement(reactElement, {
on: this.state.on,
toggle: this.toggle,
})
})
}
}
// 使用这种设计模式来复合组件, 可以看到组件的使用十分清晰
<Toggle onToggle={() => console.log('onToggle')}>
<Toggle.On>The button is on</Toggle.On>
<Toggle.Off>The button is off</Toggle.Off>
<Toggle.Button />
</Toggle>

资料