React高阶组件强制重新渲染被包装的组件
React Higher Order Component forces re-render of wrapped component
我正在努力理解如何在高阶组件中正确实现此验证行为。
===========================================
编辑:TLDR:感谢用户@noa-dev的优秀建议,我在这里创建了一个React Fiddle: https://jsfiddle.net/8nLumb74/1/来显示这个问题。
简单地说:为什么我的文本框在这个HOC包装时失去了编辑的重点?
我做错了什么?
Textbox组件:
import React from 'react'
export default React.createClass({
changeText(e) {
if (this.props.validate)
this.props.validate(e.target.value)
this.props.update(e.target.value)
},
componentDidMount() {
console.log('should only be fired once')
},
render() {
return (<input type="text"
value={this.props.text}
onChange={this.changeText} />)
}
})
Validator组件:
import React from 'react'
export default function (WrappedComponent) {
const Validation = React.createClass({
validate(text) {
console.log('validating', text)
},
render() {
return (
<WrappedComponent
{...this.props}
validate={this.validate}
/>
)
}
})
return Validation
}
父Form组件:
import React from 'react'
import TextBox from './text-box'
import Validator from './validator'
export default React.createClass({
getInitialState() {
return ({text: 'oh hai'})
},
update(text) {
this.setState({text})
},
render() {
const ValidatingTextBox = Validator(TextBox)
return (<ValidatingTextBox
text={this.state.text}
update={this.update} />)
}
})
在Form
组件的render
方法中,每次都创建一个新的ValidatingTextBox
:
render() {
const ValidatingTextBox = Validator(TextBox)
return (<ValidatingTextBox
text={this.state.text}
update={this.update} />)
}
相反,您应该创建组件,然后使用它来维护实例。可能的Form
组件如下所示:
import React from 'react'
import TextBox from './text-box'
import Validator from './validator'
const ValidatingTextBox = Validator(TextBox)
export default React.createClass({
getInitialState() {
return ({text: 'oh hai'})
},
update(text) {
this.setState({text})
},
render() {
return (<ValidatingTextBox
text={this.state.text}
update={this.update} />)
}
})
相关文章:
- React重新渲染但未显示正确的组件
- 不能从angular2中的子组件指定父组件中的数组
- 拨打'父亲'函数形式a'儿童'ReactJS中的组件
- 如何将函数包装在函数中以避免代码重复
- React组件等待所需道具进行渲染
- 如何创建带有插槽的vue js组件预加载程序
- 同位素库错误:未捕获错误无布局模式包装生产线8
- 如何制作父/包装器组件“;触发器”;或调用子级上的方法
- 高阶组件和访问包装元素的子元素
- 将AdobeEdge动画包装到React.js组件中
- 在DOM中包装功能的高阶组件
- 如何处理动作“发送”;通过Ember组件包装视图或视图的控制器
- 将引导标签包装到Ember组件中
- 如何从Ember组件发送动作到包装它的View
- React高阶组件强制重新渲染被包装的组件
- 用同一文件中的另一个组件包装React组件
- Angular2 :渲染一个没有包装标签的组件
- AngularJS组件可以修改它们的包装元素吗?
- 当在Angular 2中使用ngFor时,有没有可能不使用组件选择器标签来包装组件内容?
- 将class分配给React中自定义组件的外部包装器