本文介绍了javascript中静态方法的名称不应该重复吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用 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.constructorA.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中静态方法的名称不应该重复吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-27 16:43