标签：order export one 组件 实现 col default color app
高级组件概念：
为了提?组件复?率，可测试性，就要保证组件功能单?性；
但是 若要满?复杂需求就要扩展功能单?的组件，在React?就有了 HOC（Higher-Order Components）的概念，
定义：?阶组件是?个??函数，它接收?个组件并返回另?个组 件。
1 import React from ‘react‘; 2 import ‘./App.css‘; 3 import Home from ‘./pages/Home‘; 4 5 6 function Child(props){ 7 return <div>Child</div> 8 } 9 10 const foo=Cmp=> props=>{ 11 return( 12 <div style={{border:‘solid 1px red‘}}> 13 <Cmp {...props} /> 14 </div>) 15 } 16 17 function App() { 18 const Foo = foo(Child) 19 return ( 20 <div className="App"> 21 <Child></Child> 22 <Foo /> 23 {/* <Home /> */} 24 </div> 25 ); 26 } 27 28 export default App;
高阶组件可以实现链式调用，不过不推荐实际使用，基于上面代码
1 const foo2=Cmp=> props=>{ 2 return( 3 <div style={{border:‘solid 1px orange‘, padding:‘10px‘}}> 4 <Cmp {...props} /> 5 </div>) 6 } 7 8 function App() { 9 const Foo = foo2(foo(Child)) 10 return ( 11 <div className="App"> 12 <Child></Child> 13 <Foo /> 14 {/* <Home /> */} 15 </div> 16 ); 17 }
标签：order export one 组件 实现 col default color app
原文地址：https://www.cnblogs.com/nothingness/p/13604903.html
