编写组件
import PropTypes from 'prop-types' ;
import React from 'react' ;
import { connect} from 'react-redux' ;
import { injectIntl, intlShape} from 'react-intl' ;
import analytics from '../lib/analytics' ;
import log from '../lib/log' ;
import { LoadingStates, onLoadedProject, onProjectUploadStarted} from '../reducers/project-state' ;
import { openLoadingProject, closeLoadingProject} from '../reducers/modals' ;
function getProjectId ( ) {
if ( document. getElementById ( "projectId" ) ) {
return $ ( "#projectId" ) . val ( ) ;
} else {
alert ( "sb3-downloader-qiniu.jsx文件提示:页面不存在id属性为projectId的对象!" ) ;
return null ;
}
}
class SB3DownloaderQiniu extends React. Component {
constructor ( props) {
super ( props) ;
}
componentDidMount ( ) {
var _this = this ;
if ( getProjectId ( ) == null ) {
return ;
}
var sb3Path = null ;
$. ajax ( {
dataType: "json" ,
async : false ,
url: "/project/checkProjectByProjectId" ,
data: { id: getProjectId ( ) } ,
success: function ( res) {
if ( res. success== true ) {
sb3Path = res. sb3Path;
}
}
} ) ;
$ ( window) . on ( "load" , function ( ) {
let reader = new FileReader ( ) ;
let request = new XMLHttpRequest ( ) ;
request. open ( 'GET' , sb3Path, true ) ;
request. responseType = "blob" ;
request. onload = function ( ) {
if ( request. status== 404 ) {
alert ( "未找到sb3类型的资源文件" ) ;
location. href= '/scratch' ;
}
let blobs = request. response
reader. readAsArrayBuffer ( blobs) ;
reader. onload = ( ) => _this. props. vm. loadProject ( reader. result) . then ( ( ) => {
analytics. event ( {
category: 'project' ,
action: 'Import Project File' ,
nonInteraction: true
} ) ;
_this. props. onLoadingFinished ( _this. props. loadingState) ;
} ) . catch ( error => {
log. warn ( error) ;
} ) ;
}
request. send ( ) ;
} ) ;
}
render ( ) {
return this . props. children ( this . props. className) ;
}
}
SB3DownloaderQiniu. propTypes = {
children: PropTypes. func,
className: PropTypes. string,
intl: intlShape. isRequired,
loadingState: PropTypes. oneOf ( LoadingStates) ,
onLoadingFinished: PropTypes. func,
vm: PropTypes. shape ( {
loadProject: PropTypes. func
} )
} ;
SB3DownloaderQiniu. defaultProps = {
className: ''
} ;
const mapStateToProps = state => ( {
loadingState: state. scratchGui. projectState. loadingState,
vm: state. scratchGui. vm
} ) ;
const mapDispatchToProps = ( dispatch, ownProps) => ( {
onLoadingFinished: loadingState => {
console. dir ( "sb3文件加载完毕!" ) ;
dispatch ( onLoadedProject ( loadingState, ownProps. canSave) ) ;
dispatch ( closeLoadingProject ( ) ) ;
}
} ) ;
const mergeProps = ( stateProps, dispatchProps, ownProps) => Object. assign (
{ } , stateProps, dispatchProps, ownProps
) ;
export default connect (
mapStateToProps,
mapDispatchToProps,
mergeProps
) ( injectIntl ( SB3DownloaderQiniu) ) ;
使用组件
< SB3DownloaderQiniu >
{ ( className, loadProject) => (
< button onClick= { loadProject} className= { classNames ( styles. scratchHide) } > < / button>
) }
< / SB3DownloaderQiniu>