react怎么设置全局变量

Question

请问，vue中可以通过VUE.prototype.plugin=plugin方式让所有组件中都能直接调用plugin的方法，react中有没有类似的方式？

Answer 1

总感觉上面的同学连提问者的意图都没有明白。

确实，在 vue 中可以通过 VUE.prototype.plugin=plugin 方式让所有组件中都能直接调用plugin的方法，因为最后咱们会执行 new vue() 的方式来启动框架，这样咱们在组件中可以方便的使用类似this.lodash.xxx()这样一些自定义的方法了。
但是在 React 中，启动框架的方式是通过执行 ReactDOM.render() 这样一种方式来进行的，咱们没有一个全局的对象，因而无法通过类似React.prototype.xxx = xxx的方式来进行设置。

但还有一个替代的方法，就是通过在入口文件那设置全局变量或全局方法的方式来代替：
比如我希望能有一个全局打印函数 p，那么我这样来设置：

# tool/print.js
window.p = (data) => {console.log(data)}

# 入口文件：Index.jsx
import './tool/print.js'

这样就可以全局使用它了

Answer 2

class Demo extends Component {
  constructor(props) {
    super(props)
  }
  componentWillMount() {
    window.temp = 'demo'
  }
}

Answer 3

单说 react 的话可以使用 context，但在官方文档中并不建议的使用 context，因为

If you want your application to be stable, don't use context. It is an experimental API and it is likely to break in future releases of React.

同时它也建议你使用 Redux 或是 Mobx。

Answer 4

reduex或者你直接一个公用的js，然后引进去，就可以调用

Answer 5

可以在 webpack 中 插件里设置全局变量

Answer 6

创建公用的js 公用方法 export 然后在任意js里面引用就可以了 比如常用的格式转好 判断 排序等方法
公用变量 在公用js里设置全局变量 将获取改变变量写成方法 供其他js调用即可
react-redux 的公用变量改变会触发componentWillReceiveProps方法

Answer 7

react 组件不都是继承自 component 么，你在这上面加吧。不过你确定这样好吗

Answer 8

如果涉及到大量的交互都需要使用到这个全局变量的话，建议使用Redux来作为解决方案

Answer 9

写声明文件就行了d.ts
declare const AMap;

Answer 10

react不是类的继承机制吗，那可不可以class myPage extends React.component，myPage这个类继承react组件，我在myPage类上加方法，然后其他组件全都继承自myPage，如class a extends myPage，这样是不是子类都能继承myPage上的方法，达到全局方法的效果呢

Answer 11

.env文件了解一下