记录一次react相关总结
背景说明：元旦接到一个管理后台的项目，是一个关于自定义专题的项目。通过后台的配置自定义专题，前端根据专题模块进行渲染数据。由于管理后台是react做的前后分离，对于一个后端的我来说写写js也算是浅尝一下。如下记录一下工作中遇到的一些问题，和解决方案。
一、父组件调用子组件、以及子组件调用父组件
为什么会遇到这个问题，因为目前的需求是是无限增加Tabs标签，每一个Tabs标签页面又可以增加无限个子Tab标签，由于react只会子页面第一次加载的时候调用一次钩子函数，后期切换标签遍不在刷新页面，于是就会遇到父亲改变，需要改变子组件的数据，子组件改变也需要同步父组件的数据。
（1）父组件调用子组件解决方案如下：
let topicComList = [{ title: '轮播排序', content: <GroupSort topicId={that.state.topicId} componentId={this.state.componentId} onRef={this.onRef}/> , key: '1', closable: false }];1)上面这段代码是父组件页面中书写的Tab的子组件内容，在子组件传递 onRef = { this.onRef }
//实现一个子组件对象onRef = (ref) => {
this.child = ref;
}
2）在父组件中实现这个箭头函数，并且在页面上定义一个child state
这个的作用是将子组件的对象传递给父组件的child，后期便通过this.child.fun()去调用子组件的方法
3）子组件这样写
componentDidMount() { this.props.onRef(this)
this.state.topicId = this.props.topicId;
this.topicComponentGroupList();
}
只看第二行，接收父组件传递的 onRef 指定一个this即可
4）实现如上操作就可以进行调用子组件的方法了，实现如下
if ( typeof this.child == 'object' ) { this.child.onRefFun();
}
这样就可以正常访问子组件的onRefFun方法了，其实很方便。
（2）子组件调用父组件解决方案如下：
let topicComList = [{ title: '轮播排序', content: <GroupSort topicId={that.state.topicId} componentId={this.state.componentId} clickCallBack={that.clickCallBack} /> , key: '1', closable: false }];同样是这样的一个子组件，给子组件传递一个函数 clickCallBack， 子组件便可通过 this.props.clickCallBack()去调用父亲的函数。
1）首先在父组件实现这个函数 clickCallBack
//子组件调用父组件函数clickCallBack = () => {
this.topicComponentGroupList();
}
2）在子组件中，在需要更新父组件的地方，this.props.clickCallBack即可
handleSubmit = (e) => { e.preventDefault();
let that = this;
that.setState({ loadingForm: true });
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
let saveVal = {};
saveVal = {
anchors:[{
name: values.groupName,
id: values.anchor
}]
};
that.props.dispatch({
type: 'editgroup/edit',
payload: {
topicId: that.state.topicId,
componentId : this.state.componentId,
componentGroupId: that.state.groupId,
value: JSON.stringify(saveVal),
groupName: values.groupName
}
}).then(function (response) {
Modal.success({
title: '消息',
content: '操作成功！' ,
});
that.setState({
loadingForm: false,
messageType:'success',
message:'温馨提示：恭喜小主，您已保存成功！'
});
that.props.clickCallBack();
}.bind(that)).catch( function ( errmsg ) {
Modal.error({
title: '消息',
content: '错误信息： ' + errmsg,
});
that.setState({ loadingForm: false });
});
} else {
that.setState({ loadingForm: false });
}
});
}
以上就是关于组件直接的互相调用。
二、如果实现js的异步执行 Promise
根据需求上传图片需要获取图片的宽和高，但是由于js都是异步执行的，往往我这边的宽和高还没有或取到，js的操作流程就已经结束了，导致不能够100%获取到图片的宽和高，通过查询知道 Promise 是专门执行异步操作的 ，它会等待异步完成执行完成在继续执行下去。
写法如下：
beforeUpload = file => { const { fileSizeLimit = 5 } = this.props;
const isJPG = imageTypes.includes(file.type);
if (!isJPG) {
Modal.error({
title: '只支持上传图片类型!'
});return false;
}
const isLt2M = file.size / 1024 / 1024 < fileSizeLimit;
if (!isLt2M) {
Modal.error({
title: `文件大小不能超过${fileSizeLimit}M!`
});return false;
}
return isJPG && isLt2M && this.checkImageWH(file);
};
checkImageWH = (file) => {
let self = this;
return new Promise(function (resolve, reject) {
let filereader = new FileReader();
filereader.onload = e => {
let src = e.target.result;
const image = new Image();
image.onload = function () {
self.state.imageWidth = this.width;
self.state.imageHeight = this.height;
if (!self.state.imageWidth) {
Modal.error({
title: '请上传图片的宽'
})
reject();
} else if (!self.state.imageHeight) {
Modal.error({
title: '请上传图片的高',
})
reject();
} else {
resolve();
}
};
image.onerror = reject;
image.src = src;
};
filereader.readAsDataURL(file);
});
}
以上的关键点就在于这一句： return isJPG && isLt2M && this.checkImageWH(file); 同步执行成功才成功，否则就失败。
由此可见 Promise 最后只会返回成功，或者失败。
具体可借鉴https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000
三、编辑时图片信息不显示出来
原因说明，由于react 渲染页面render会多次，而图片组件只会识别第一次的render渲染,从而导致当datasource有数据时图片信息不显示，而其他数据显示没有问题。
解决方案：这个方法主要是占一个坑，不让页面走下去，直到有数据时才真正的渲染html
if (this.state.topicId && this.state.dataSource.length === 0) { return <Spin size="large" />;
}
以上这些是在这次工作中的解决方案，方便记忆。
以上是 记录一次react相关总结 的全部内容， 来源链接： utcz.com/z/384416.html
