脚本宝典收集整理的这篇文章主要介绍了React手稿之高阶组件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Higher-Order components
示例:
const EnhancedComponent = higherOrderComponent(WrapPEdComponent);
使用场景
代码复用
类似React 0.15版本之前的mixin
。
多个组件同用一段代码,或者同样的方法时,可以使用HOC。
示例:
import React, { PureComponent } From 'react';
const Common = (WrapComponent) => {
return (
<div>
<h1>Title</h1>
<WrapComponent />
</div>
);
};
const Header = () => <div>Header</div>;
const Footer = () => <div>Footer</div>;
export default class extends PureComponent {
render() {
return (
<div>
<div>
<p>Header Component</p>
{Common(Header)}
</div>
<hr />
<div>
<p>Footer Component</p>
{Common(Footer)}
</div>
</div>
);
}
}
state
和更改PRops
可以通过WrappedComponent
包裹的组件公共state
抽象出来。
可以通过WrappedComponent
包裹的组件传递修改、添加等的props
.
示例:
const HOComp = (WrappedComponent) => {
return class extends React.Component {
constructor(props) {
super(props);
this.state = {name: ''};
}
componentDidMount() {
this.setState({name: WrappedComponent.displayName || WrappedComponent.name || 'Component';});
}
return <WrappedComponent name={this.state.name} {...this.props}/>
}
}
条件渲然。根据props
或者state
条件返回在渲然的内容。
示例:
const HOComp = (WrappedComponent) => {
return class Enhancer extends WrappedComponent {
render() {
if (this.props.loggedIn) {
return super.render()
} else {
return null
}
}
}
}
返回的高阶组件类(Enhancer
)继承了 WrappedComponent
。
示例:
const EnchanceComponent = (WrappedCompopnent) => {
return class extends WrappedCompopnent {
constructor(props) {
super(props);
this.state = { error: '' };
}
componentDidMount() {
/*do something*/
super.componentDidMount();
}
render() {
if (this.state.error) {
return <div>{this.state.error}</div>;
} else {
return super.render();
}
}
}
};
以上是脚本宝典为你收集整理的React手稿之高阶组件全部内容,希望文章能够帮你解决React手稿之高阶组件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。