react.js - React高阶组件
本文介绍了react.js - React高阶组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
class Demo extends React.Component{
render(){
let data = [
{
name: '科目一',
id: '1'
},
{
name: '科目二',
id: '2'
},
{
name: '科目三',
id: '3'
}
];
return (
<MyComponent data={data} fieldName={{label: 'name', key: 'id'}}/>
);
}
}
const showAlert = function(){
let str = '';
for(var i = 0; i < arguments.length; i++){
str += JSON.stringify(arguments[i]) + '\n';
}
alert(str);
};
//HOC 高阶组件的应用
let withRenameFieldName = (WrappedComponent) => {
return class extends React.Component{
render(){
let { data, fieldName, ...props } = this.props;
let tmpData = data.slice();
if(fieldName){
tmpData.map(item => {
for(let rename in fieldName){
if(item[fieldName[rename]]){
item[rename] = item[fieldName[rename]];
delete item[fieldName[rename]];
}
}
});
}
showAlert(tmpData, data);
return <WrappedComponent {...props} data={tmpData} defaultData={data}/>
}
}
};
class MyComponent extends React.Component{
render(){
let { data, defaultData } = this.props;
return (
<ul>
{data.map((item, index) => (
<li key={item.key}>
{item.label}
</li>
))}
</ul>
);
}
}
MyComponent = withRenameFieldName(MyComponent);
ReactDOM.render(
<Demo/>,
document.getElementById('root')
);
因为MyComponent
有一个data
属性,我想让这个data
的属性名称是可配的,所以写了一个withRenameFieldName
高阶组件,赋予组件一个新的data
属性(更新属性名后的)和defaultData
属性(原始data),但是不知道为什么defaultData
的属性也被改了,这个应该怎么写才好呢?
解决方案
slice这种方式来获取一个新数组,但是slice使用的是浅引用的方式,所以data和tmpData中的对象是同一个,而你之后的操作又都是在对象上,所以data和tmpData的表现一致
这篇关于react.js - React高阶组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文