javascript - React - 在 React 组件内声明全局变量

Question

这是如何工作的？

我想在 React 组件类中声明一个变量，并在我的应用程序的几个不同区域中使用它。

尝试如下所示:

class ColorPick extends React.Component {
  colorInput;

  constructor(props) {
    super(props);
    this.state = {
      color: "Let's pick a color"
    };
  }

  // use this many times in my app
  colorInput = document.getElementById("colorInput").value;

  changeColor(event) {
    this.setState({
      color: "#" + event.target.value,
      backgroundColor: "#" + event.target.value
    });

    if (colorInput === "") {
      this.setState({
        color: "Let's pick a color",
        backgroundColor: "#fff"
      });
    }
  }
}

发生的情况是我收到此错误:

Error in ./src/components/colorpicker.jsx Syntax error: Unexpected token (12:8)

10 | } 11 |

12 | var colorInput = document.getElementById('colorInput').value; | ^ 13 | 14 | changeColor(event) { 15 | this.setState({

@./src/index.js 29:19-54

我不明白为什么会发生这种情况，也找不到任何文档可以清楚地解释这一点。

How to declare global variables in React JS

所以我做到了:

全局.js:

global.colorInput = colorInput;

colorpicker.js:

import React, { Component } from 'react';
import Global from './global'

class ColorPick extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
        color: "Let's pick a color"
      };
    }

    var colorInput = document.getElementById('colorInput').value;

    changeColor(event) {
      this.setState({
        color: '#' + event.target.value,
        backgroundColor: '#' + event.target.value
      });

      if (colorInput === '') {
        this.setState({
          color: "Let's pick a color",
          backgroundColor: "#fff",
      });
    }
   }

我仍然遇到同样的错误。为什么？

How do I create a globally accessible variable in React JS

在我正在寻找的上下文中没有完全回答我的问题。

如何在 React 类/组件中声明变量并重用它？这是如何运作的？

Answer 1

您的 ColorPick 组件有问题:您正在尝试使用 var 关键字定义类字段声明。这就是您收到语法错误的原因。此外，类中的字段声明是一项实验性功能。这意味着，您必须使用一些预处理器将代码转换为 ES5，因此它可以在不支持此功能的浏览器上运行。

看看Fields declarations documentation了解更多信息。

而且，您应该在构造函数<中将其分配给字段声明处的document.getElementById('colorInput').value/。然后您将获得最新的值。以下是我重写您的组件的方法:

class ColorPick extends React.Component {
  colorInput;

  constructor(props) {
    super(props);
    this.state = {
      color: "Let's pick a color"
    };
    this.colorInput = document.getElementById("colorInput").value;
  }

  changeColor(event) {
    this.setState({
      color: "#" + event.target.value,
      backgroundColor: "#" + event.target.value
    });

    if (colorInput === "") {
      this.setState({
        color: "Let's pick a color",
        backgroundColor: "#fff"
      });
    }
  }
}

现在，有多种方法可以在组件之间共享数据，而无需在全局范围中定义变量。请参阅 React 的 "Lifting State Up"文档页面介绍了如何处理这个问题。然后你还可以尝试像 React Context 或 Redux 这样的东西。

如果您想在全局范围中声明某些内容，您可以使用window对象。

window.myGlobalVar = '#FFF'

您必须检查它在应用程序的整个生命周期中如何发生变化，因此我建议您首先尝试其他替代方案。