Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/23.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 导入实例化的类将设置全局原型_Javascript_Reactjs_Ecmascript 6_React Redux_Es6 Class - Fatal编程技术网

Javascript 导入实例化的类将设置全局原型

Javascript 导入实例化的类将设置全局原型,javascript,reactjs,ecmascript-6,react-redux,es6-class,Javascript,Reactjs,Ecmascript 6,React Redux,Es6 Class,给定以下react组件,我能够从多个组件导入以下组件。我不明白为什么在导入到每个模块并调用increment之后,它会像是同一个实例一样增加值。我不认为它附在“窗户”上,因为我做了一些检查 这可能是因为这设定了一个全球原型吗?这仍然不能解释为什么它似乎在更新同一个实例化的类 import React, { Component } from 'react'; class FeatureFlags extends Component { constructor (props) { su

给定以下react组件,我能够从多个组件导入以下组件。我不明白为什么在导入到每个模块并调用increment之后,它会像是同一个实例一样增加值。我不认为它附在“窗户”上,因为我做了一些检查

这可能是因为这设定了一个全球原型吗?这仍然不能解释为什么它似乎在更新同一个实例化的类

import React, { Component } from 'react';

class FeatureFlags extends Component {
  constructor (props) {
    super (props);
    this.featureFlagList = [ 'test': true ];
    this.i = 0;
  }

  get showFeatureFlagList () {
    return this.featureFlagList;
  }

  increment () {
    this.i++;
    return this.i;
  }

  setList (list) {
    this.featureFlagList = list;
    return this.featureFlagList;
  }

  render () {
    return (
      <div></div>
    );
  }
}

export default new FeatureFlags;

//First component - 
import FeatureFlags from './FeatureFlags';
console.log('first module ',  FeatureFlags.increment() );  //Logs 1

//Second component
import FeatureFlags from './FeatureFlags';
console.log('second module ',  FeatureFlags.increment() );  //Logs 2
import React,{Component}来自'React';
类FeatureFlags扩展组件{
建造师(道具){
超级(道具);
this.featureFlagList=['test':true];
这个。i=0;
}
获取showFeatureFlagList(){
返回此.featureFlagList;
}
增量(){
这个.i++;
把这个还给我;
}
集合列表(列表){
this.featureFlagList=列表;
返回此.featureFlagList;
}
渲染(){
返回(
);
}
}
导出默认的新功能标志;
//第一部分-
从“/FeatureFlags”导入FeatureFlags;
log('first module',FeatureFlags.increment())//日志1
//第二部分
从“/FeatureFlags”导入FeatureFlags;
log('second module',FeatureFlags.increment())//日志2
不,那是因为你

export default new FeatureFlags;
这只是一个例子!多次导入模块将始终导入相同的值

相反,您应该始终导出类:

export default class FeatureFlags extends Component { … }
并根据需要在其他模块中实例化:

import FeatureFlags from './FeatureFlags';
const myLocalFlags = new FeatureFlags;
console.log('first module ', myLocalFlags.increment());  //Logs 1

我在这里可能非常幼稚,但除了导出之外,我看不到
new
关键字,我倾向于说它是同一个实例。“多次导入模块将始终导入相同的值”??精神崩溃。如果我使用导出类语法,我是否必须调用new来实例化一个新实例?这就是我所追求的行为(将其作为一个实例共享)。我只是想知道它为什么会起作用。如何保留现有代码并呈现此组件?抛出一个react错误。删除新组件解决了这个问题,但打破了我将其作为一个实例共享的初衷。我认为React要求其组件是类,以便它可以在必要时实例化它们。我认为您应该显式地创建一个全局状态存储,并使用它(将其传递给)组件的所有用法。我想把它包含在这个模块中,以减少样板文件和依赖性。如果你想以一种黑客的方式做这件事,只需在模块范围内放置一个静态可变变量并对其进行操作。零样板文件和依赖项,很明显,它不是一个干净的redux组件:-)