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è)問(wèn)題是:怎么能把 WrapperComponent 組件上的數(shù)據(jù),拿到當(dāng)前的高階組件內(nèi)部?補(bǔ)充:高階組件調(diào)用:import {Input} from 'antd';HOC(<Input />)
寫(xiě)了一個(gè)React的HOC出了點(diǎn)問(wèn)題
森林海
2019-03-13 17:19:35