I had this working in a react-native app, but I feel I had to do some stuff with babel and I can't remember what it was. For whatever reason this is not working, it's saying cannot read property CONSTANT_1 of undefined.
export default class Main extends React.Component {
static MyClassProp = {
CONSTANT_1: 1,
CONSTANT_2: 2
};
static defaultProps = {
prop1: Main.MyClassProp.CONSTANT_1
};
...
}
Can anybody tell me if I'm supposed to include something in a .babelrc or package.json to get this to compile correctly?
Related
In App.js I have some thing like
Class App extends Component {
constructor(props){
super(props)
global.test = NativeModules.TestClass
}
}
And in Test class I am using it like
Class Test extends Component {
constructor(props){
super(props)
global.test.testFunction("Testing")
}
}
So how to mock global.test.testFunction for the above class
I suggest another approach for global function, variables. You can create a Utils class for each global functions, variables (constants or enums) and import the Utils wherever you need to use them.
Here is a very basic example for Utils Class:
Utils Class
export default class Utils {
static navigationRef = null;
static showAlert(title, desc) {
Alert.alert(title, desc);
}
}
USAGE:
import Utils from "./shared/utils"
// Example of static function
Utils.showAlert("Hello" "Alert Description")
// Example of static variable
Utils.navigationRef = this.props.navigation;
I created a class in react native.
import Author from "./authorDetails";
class MainFeedPost {
id;
description;
postImage;
author;
creationDateTime;
version;
status;
extra = {
likes,
shares,
comments
};
constructor() {
this.author = new Author();
}
}
export default MainFeedPost;
Now I want to set this as a type in one of my components state. I tried it like this an it is undefined.
import { MainFeedPost } from "../../models";
class SharePostScreen extends Component {
constructor(props) {
super(props);
this.state = {
post: MainFeedPost
};
}
doesn't this support in react native? I want to initialize the shape of my object with MainFeedPost class.
You told "as a type". If you want static type checking, you need something like flow.
If you wanna value in the state, you must place there an instance:
...
this.state = {
post: new MainFeedPost(),
};
...
UPD:
I got your point. Because of default export you need to use import MainFeedPost from "...", without braces.
I have a class Two with a bunch of functions inside. Some of them are using this.setState({}) and they throw me a warning: setState(...): Can only update a mounted or mounting component.
Here's an example of the code:
class One extends React.Component {
constructor() {
super()
this.two = new Two;
}
componentDidMount() {
this.two.hello()
}
render() {
return (<View><Text>Hello World!</Text></View>)
}
}
class Two extends React.Component {
constructor() {
super()
this.state = {
connected: false
}
}
hello() {
this.setState({connected: true}) //This one throw the warning
}
}
Is there any way to do things in a better way? Since my class Two is functionnal, I would like to not change the code too much to have things working. Btw, I need to the this.two = new Two line.
Should I create a library, a module, or whatever? If so, can you give me a good tutorial?
If you are not mounting the Component, React can’t update it’s state using it’s built-in state handler.
And since you are not mounting it, it should probably not be a react component at all. Try using a regular class instead:
class Two {
constructor() {
super()
this.state = {
connected: false
}
}
hello() {
this.state.connected = true
}
}
The main problem here is you are trying to make components in React communicate in an unconventional way.
The way you want to go about this is to make use of props. This is how components talk to each other in React, instead of being direct, like you're attempting.
Check out my code here where I'm doing the same as you
Basically, I've written 2 examples in 1 here. The first is passing just raw data through to another component. (this.props.data.someData). And the second, which is more like what you're wanting to do, is using React's Life Cycle methods, to listen for when a function should run, through prop activation.
What this means in my example, is when the runFunction prop is passed into Two, either when it's first created componentDidMount() or when set to true later componentWillRecieveProps(), it will run the testFunction()
Can anyone point a direction of the Component syntax using the latest React-Native init cmd? I don't recall ES6 class syntax quite like it.
export default class App extends Component<{}> {
}
Where, I've seen the following without brackets.
export default class App extends Component {
}
Thanks
Reference : https://reactjs.org/docs/components-and-props.html
class Example extends Component {
render() {
return <h1>Hello</h1>;
}
}
This is the ES6 way of defining components in react.
I have a file a.ts which contains a class A inside a module:
module moduleA {
export class A {
}
}
export = moduleA.A;
And another file b.ts which imports class A:
import A = require('a.ts');
class B {
// This leads to an error: Cannot find name 'A'
private test: A = null;
constructor() {
// But this is possible
var xyz = new A();
}
}
Interestingly, Typescript shows an error when I want to use A as a type in B. However, instantiating A does not lead to an error.
Can anybody explain me, why this is like that?
Thank you very much!
The use of the namespace module moduleA is not necessary... you can do this...
the keyword module is synonymous with namespace (C#) now... best practice is to use the ES6 style module structure which is basically each file is a module and export what you need and import what you need from elsewhere.
// a.ts
export class A {}
// b.ts
import { A } from './a';
class B {
private test: A = null; // will not error now
constructor () {
var xyz = new A();
}
}
Note: this is based upon TypeScript v1.5+