I'm currently converting a javascript/react project to a typescript/react/redux project.
I'm currently having a problem with this file:
import React from 'react';
import GoldenLayout from 'golden-layout';
import {Provider} from 'react-redux';
import Default from '../modules/m-Default/Default';
interface GoldenLayoutWrapperProps {}
interface GoldenLayoutWrapperState {}
class GoldenLayoutWrapper extends React.Component <GoldenLayoutWrapperProps, GoldenLayoutWrapperState> {
public layout;
static contextTypes = {
store: React.PropTypes.object.isRequired
};
private wrapComponent(Component, store) {
class Wrapped extends React.Component {
render () {
return (
<Provider store={store}>
<Component {...this.props}/>
</Provider>
)
}
}
return Wrapped;
}
componentDidMount() {
var layout = new GoldenLayout(this.layoutConfig, this.layout);
layout.registerComponent('Default', this.wrapComponent(Default, this.context.store));
}
render() {
return (
<div className="golden-layout-wrapper" ref={input => this.layout = input}/>
)
}
private layoutConfig = {}
}
export default GoldenLayoutWrapper;
When I attempt to compile, I get the following error:
ERROR in [at-loader] ./src/main/GoldenLayoutWrapper.tsx:18:22
TS2339: Property 'PropTypes' does not exist on type 'typeof React'.
After some searcing, some people suggested to give contextTypes
a static modifier, which I attempted, but the problem still persists.
What could be the problem?
As you are using React v16.0.0 , You need to make use of prop-types
as it is treated a separate library since React v15.5
You can install it via npm as a project dependency
npm install --save prop-types
And then inside your component where you want to use it :
import PropTypes from 'prop-types'; // ES6
Instead of React.PropTypes
you can directly use PropTypes
You can read more about prop-types Here
Check my answer here for full details: Cannot read property 'string' of undefined | React.PropTypes | LayoutPropTypes.js
In short, as of React v15.5 React.PropTypes
is deprecated. You'll need to install the prop-types
package from npm.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.