高阶组件2 项目实例
自己项目中写一个高阶组件,插入到body中,用完销毁
在项目中实际场景是一个选人组件,点击选人之后,返回所选人员的信息,之前是存在localstorage里,太麻烦了,每个页面都要写引入和回调。用这种方式的话每次用完就不留痕迹。在点击事件时调这个函数,插入到body里,选中的结果在回调中传给原页面,这个div用完就即时销毁掉了。
class Hoctest extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [
{
value: "apple",
name: "苹果"
},
{
value: "banana",
name: "香蕉"
},
{
value: "pear",
name: "梨"
}
],
selected: null
}
;
}
render() {
let t = this, { list } = t.state;
return (
<div className="hoctest main t-FBV">
{
list && list.map((item)=>{
return <div key={item.value} onClick={()=>{this.setState({selected: item})}} className={"item"}>{item.name}</div>
})
}
<div className="cancel" onClick={()=>{this.props.handleCancel()}}>取消</div>
<div className="confirm" onClick={()=>{this.props.handleOk(this.state.selected)}}>确定</div>
</div>
);
}
componentWillMount() {
}
componentDidMount() {
}
componentWillReceiveProps(nextProps) {
}
shouldComponentUpdate(nextProps, nextState) {
return true;
}
componentWillUpdate(nextProps, nextState) {
}
componentDidUpdate(prevProps, prevState) {
}
componentWillUnmount() {
}
}
上面是自己写的一个简单的组件,项目中是想要用这个组件并返回所选中的水果
下面写一个包裹的组件, 将上面的组件插入到body
/**
* 包裹组件
* @param config 外部传入的配置
*/
const withPersistentData = config =>{
/*
创建div 并插入到body中
*/
let div = document.createElement('div');
div.className = 'hoc-test';
document.body.appendChild(div);
/**
* 销毁 div
* @param args
*/
function destroy(...args) {
// react 提供的方法 unmountComponentAtNode 销毁指定容器内的所有React节点
const unmountResult = ReactDOM.unmountComponentAtNode(div);
if (unmountResult && div.parentNode) {
div.parentNode.removeChild(div);
}
// 如果有传入取消的函数,则在此处执行
if (config.handleCancel) {
config.handleCancel(...args);
}
}
/**
* 点击确定
* @param args
*/
function handleOk(...args) {
// 执行传入的确定函数 并销毁元素
config.handleOk(...args);
destroy(...args);
}
/**
* 渲染
* provider 连接store 项目中用到的是redux,如果不需要用到store中的数据,可以省略
* @param props
*/
function render(props){
// 将模板转为HTML语言,并插入指定的DOM节点
ReactDOM.render(<Provider store={store}><Hoctest {...props} /></Provider>, div);
}
render({ ...config, handleCancel: destroy, handleOk });
}
export default withPersistentData;
使用时:
import HOCtest from "components/hoctest/Hoctest";
<div
onClick={()=>{
HOCtest({
handleOk: (data)=>{
console.log(data)
console.log("selected data_-------")
}
})
}}
>
HOC Test
</div>