问题描述
我正在使用 React Native 制作应用程序.最困难的部分是处理 javascript.我使用 Xamarin.Forms 制作了一些应用程序.现在我被 React Native 所吸引.
I'm making an app using React Native. The toughest part is dealing with javascript. I made few app using Xamarin.Forms. Now I'm attracted to React Native.
顺便说一下.
当我打电话时console.log('我应该得到 B', B.getInstance())
在 App.js 文件中.
When I call console.log('I should be given B', B.getInstance())
in App.js file.
我不明白为什么我得到 A 的实例而不是 B 的实例,即使我调用了 B 的静态方法.
I can't understand why I get A's instance instead of B's even though I called B's static method.
谢谢.
[Root.js]
import App from './App'
import A from './A'
export default class Root extends React.Component{
render(){
return (
<View>
<App/>
<A/>
</View>
)
}
}
[App.js]
import A from './A'
import B from './B'
export default class App extends React.Component{
componentDidMount(){
console.log('I should be given B', B.getInstance())
//*************** BUT I get A's instance!!!!!!! ****************
}
render(){
return (
<View>
<A/>
<B/>
</View>
)
}
}
[A.js]
import React from 'react'
import { Text } from 'react-native';
export default class A extends React.Component{
static instance = null;
static getInstance(){
return A.constructor.instance;
}
title = 'I\'m A';
componentWillMount(){
A.constructor.instance = this;
}
render(){
return <Text>I'm A</Text>
}
}
[B.js]
import React from 'react'
import { Text } from 'react-native';
export default class B extends React.Component{
static instance = null;
static getInstance(){
return B.constructor.instance;
}
title = 'I\'m B';
componentWillMount(){
B.constructor.instance = this;
}
render(){
return <Text>I'm B</Text>
}
}
推荐答案
Short
B.constructor 和 A.constructor 引用同一个对象 在 JS 函数中也是对象 所以如果在 B 中改变一些数据.constructor 它也会影响 A.constructor
Short
B.constructor and A.constructor referencing the same object In JS functions also objects so if change some data in B.constructor it also will affect A.constructor
为了弄清楚当前情况,让我们忘记 React 和 Classes.您尝试执行的操作如下所示:
To make current situation clear lets forget about React and Classes.What you are trying to do looks like this:
const constructor = () => {} // 'constructor' is just a demonstrative it can be anything else as other variables
const A = {
constructor,
componentDidMount(){ // Again could be anything alse than 'componentDidMount'
A.constructor.instance = 'A instance';
}
}
const B = {
constructor,
componentDidMount(){ // Again could be anything alse than 'componentDidMount'
B.constructor.instance = 'B instance';
}
}
// Now A and B are not equal to each other
// But property 'constructor' in both objects(A,B) references to the same 'constructor' function
//Now lets do what you did, In your examble you was rendering component A 2 times, and B 1 time. A -> B -> A. The last comonent was rendered is A. So what happens at that time
//render A
A.componentDidMount() // This sets constructor.instance to 'A'
console.log(A.constructor.instance);
B.componentDidMount() // This overwrites constructor.instance to 'B'|
// Now if you call
console.log(A.constructor.instance) // This will return 'B'
// And at the last you are rendering 'A' 2th tiem
A.componentDidMount() // And this again overrides constructor.instance to 'B'
//So after this you are trying to get data from B.constructor
//which will be 'A' because A.constructor == B.constructor
为避免此问题不要将数据存储在构造函数中.我认为您可以通过使用 React 的参考
To avoid this problem don't store your data in constructors.I think you can handle this problem by using React's ref's
希望对你有帮助
这篇关于javascript中静态方法的名称不应该重复吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!