React之高阶组件 迈不过友情╰ 2021-12-10 11:45 309阅读 0赞 # React之高阶组件 # 注意:本章节运行环境在[React项目构建][React]章节之上。 ### 文章目录 ### * React之高阶组件 * * 高阶组件 * 装饰器 * 带参装饰器 ## 高阶组件 ## 1. `let Root = props => <div>{props.schoolName}</div>;`如果要在Root组件进行增强,例如将Root外部再加入其它div。 import React from 'react'; import ReactDom from 'react-dom'; let Wrapper = function (Component){ function _wrapper(props){ return ( <div> { props.scholName}<hr /> <Component /> </div> ); } return _wrapper; } let Root = props => <div>Root</div>; let NewComp = Wrapper(Root) //返回一个包装后的元素 ReactDom.render(<NewComp scholName="xdd" />,document.getElementById("root")); * 在\_wrapper(props)中本身就是一个无状态组件,内部包囊这一个传入的组件,可以看做增强了传入的组件。传入的组件作为返回的新组件的子组件 2. 简化高阶组件 import React from 'react'; import ReactDom from 'react-dom'; let Wrapper = Component => props => ( <div> { props.scholName}<hr /> <Component /> </div> ); let Root = props => <div>Root</div>; let NewComp = Wrapper(Root) //返回一个包装后的元素 ReactDom.render(<NewComp scholName="xdd" />,document.getElementById("root")); ![react\_011][react_011] ## 装饰器 ## * 新版ES2016中增加了装饰器的支持,因此可以使用装饰器来改造上面的代码。 * **ES 2016的装饰器只能装饰类,不能装饰函数** import React from 'react'; import ReactDom from 'react-dom'; let Wrapper = Component => props => ( <div> { props.scholName}<hr /> <Component /> </div> ); @Wrapper // 等价于 A = Wrapper(A) class A extends React.Component{ render(){ return <div>A</div> } } ReactDom.render(<A scholName="B" />,document.getElementById("root")); ![001][] * 让Toot也显示出schoolName的值 import React from 'react'; import ReactDom from 'react-dom'; let Wrapper = Component => props => ( <div> { props.scholName}<hr /> <Component { ...props} /> </div> ); @Wrapper // 等价于 A = Wrapper(A) class A extends React.Component{ render(){ return <div>A { this.props.scholName}</div> } } ReactDom.render(<A scholName="B" />,document.getElementById("root")); ![react\_013][react_013] * 使用`<Component {...props} />`相当于给组件增加了属性 ## 带参装饰器 ## * 上面例子中如果想给装饰器添加其他参数,可以如下实现 import React from 'react'; import ReactDom from 'react-dom'; let Wrapper = id => Component => props => ( <div id = { id}> { props.scholName}<hr /> <Component { ...props} /> </div> ); @Wrapper("xdd") // 带参装饰器 class A extends React.Component{ render(){ return <div>A { this.props.scholName}</div> } } ReactDom.render(<A scholName="B" />,document.getElementById("root")); ![002][] [React]: https://blog.csdn.net/u013008795/article/details/95764048 [react_011]: /images/20211210/de713a2cd4b94a538c77bc722415fcb0.png [001]: /images/20211210/182cc31bc3924248afd592aec24e6175.png [react_013]: /images/20211210/e79b296471ec43778e4691ce2f7c5562.png [002]: /images/20211210/d86c52f717d247ad875e5fc39d9c3053.png
还没有评论,来说两句吧...