### compoundComponentMiddles

---

这是一个参考redux中间件实现的，针对于组件的复合组件
2019-9-23 beat


### params
---


```
//例子
export const FormBaseInput = compoundComponentMiddles(
    ({config,componentInstance,interrupt})=>(next)=>(params)=>{
        const { test,value="" ,placeholder="", disabled=false, onChange=(e)=>{}} = componentInstance.props
        const render = (
            <Input 
                placeholder={placeholder} 
                disabled={disabled} 
                value={value} 
                onChange={onChange} 
            />
        )
        if(test === 1){
            interrupt(render)
        }
        next(render)
    },
    ({config,componentInstance,interrupt})=>(next)=>(params)=>{
        const { test} = componentInstance.props
        if(test === 2){
            class Test extends React.Component{
                state={
                    time: 0,
                }
                componentDidMount(){
                    setInterval(()=>{
                        this.setState({
                            time : this.state.time+1
                        })
                    },1000)
                }
                render(){
                    return <div>{this.state.time}</div>
                }
            }
            interrupt(<Test/>)
        }
        next(params)
    },
    ({config,componentInstance,interrupt})=>(next)=>(params)=>{
        const { value,rule= new RegExp(''),message ='' } = componentInstance.props
        let flag = false;
        if(Tools.isRegExp(rule)){
            flag = rule.test(value)
        }else if( Tools.isFunction(rule)){
            flag = rule(value)
        }
        const validate = flag? 'success' : 'error';
        const help = flag? false :message
        const render = (
             <div style={{flex:"1 1"}}>
                <Form.Item  validateStatus={validate}  help={help}>
                    {params}
                </Form.Item>
            </div>
        )
        next(render)
    },
    ({config,componentInstance,interrupt})=>(next)=>(params)=>{
        const { label= '', hint='' } = componentInstance.props
        const render =(
            <div className={style['base-container']}>
                <label className={style['base-label']}>{label}</label>
                <div className={style['base-content']}>
                    {params}
                    {
                        hint?
                        <span className={classname(style['base-hint'],Tools.isString(hint)?'':style['rc'])}>{hint}</span>
                        :''
                    }
                </div>
            </div>
        )
        next(render)
    },
)()

//使用
<FormBaseInput
    test={1}
    value={planName} 
    label='计划名称'
    disabled={editInfo?true:false}
    placeholder='请选择计划'
    rule={e=>!!e&&e.length<=30}
    message="计划名称长度在1到30位之间"
    onChange={(e)=>{
        const value = e.target.value
        this.setFormData('planName',value)
    }}
/>
```