React之高阶组件-蒲公英云

React之高阶组件

注意：本章节运行环境在React项目构建章节之上。

文章目录

React之高阶组件
- 高阶组件
- 装饰器
- 带参装饰器

高阶组件

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)中本身就是一个无状态组件，内部包囊这一个传入的组件，可以看做增强了传入的组件。传入的组件作为返回的新组件的子组件

简化高阶组件

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$

装饰器

新版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$

使用<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"));