寫了一個(gè)React的HOC出了點(diǎn)問題

HOC功能：
接受antd組件中的Input | TextArea等輸入組件，將 lodash 中的 debounce 方法注入到 onchange 事件當(dāng)中。
代碼如下：

import React, {Component} from 'react';
import {debounce} from 'lodash';

export default (WrapperComponent) => {
    // WrapperComponent 就是傳入的  `Input` | `TextArea` 組件
    return class extends Component {
        constructor() {
            super(...arguments);
            this.state = {
                value: null
            }
        }

        // input onChange 方法
        changeHandler = (e) => {

            e.persist();

            this.delayChange(e.target.value.trim());

        }

        // 
        componentWillMount() {

            this.delayChange = debounce((v) => {

                this.setState({value: v});

            }, 300);

        }

        render () {

            const {value} = this.state;

            if(!value) return null;

            return <WrapperComponent
                defaultValue={value ? value : null}
                onChange={this.changeHandler}
                onBlur={this.saveInputValue}
            />;
        }
    };

};

在調(diào)用的時(shí)候報(bào)warning了，如下：
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

還有一個(gè)問題是：怎么能把 WrapperComponent 組件上的數(shù)據(jù)，拿到當(dāng)前的高階組件內(nèi)部？

補(bǔ)充：
高階組件調(diào)用：

import {Input} from 'antd';

HOC(<Input />)