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"
      });
    }
  }
}

发生什么错误？

./ src / components / colorpicker.jsx中的错误语法错误：意外   令牌（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

我做到了：

global.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关键字定义类字段声明。这就是为什么您会收到语法错误的原因。此外，课堂上的field declarations是一项实验性功能。这意味着，您必须使用一些预处理器将代码转换为ES5，因此它可以在不支持此功能的浏览器中使用。

请查看Fields declarations documentation，以了解更多信息。

并且，不要在document.getElementById('colorInput').value内将其分配给field declaration处的constructor。然后，您将拥有最新的价值。这是我重新编写组件的方法：

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"
      });
    }
  }
}

现在，有多种方法可以在组件之间共享数据，而无需在Global Scope中定义变量。请参阅React的"Lifting State Up"文档页面，以获取有关如何处理此问题的一些介绍。然后，您还可以尝试类似React Context或Redux之类的东西。

如果要在Global Scope中声明某些内容，可以使用window对象。

window.myGlobalVar = '#FFF'

您将必须检查应用程序整个生命周期中的变异方式，因此建议您首先尝试其他替代方法。

Answer 2

看看上下文：https://reactjs.org/docs/context.html。作为回应，您的问题可以得到解决。

Answer 3

要在ReactJS中定义全局变量，您可以创建一个Context，以便可以在React App中传递。您可以这样定义变量：

GlobalColor.js：

import React from 'react'

const GlobalColor = React.createContext({});
export const ColorProvider = GlobalColor.Provider;
export const ColorConsumer = GlobalColor.Consumer;
export default GlobalColor;

在这里，我们有提供值的Provider组件和使用（使用）值的Consumer组件。

提供者代码可能是这样的：

ColorPickerProvider.js：

import React from 'react'
import ColorPickerConsumer from './ColorPickerConsumer'
import { ColorProvider } from './GlobalColor'

function ColorPicker() {
  const color = 'blue'
  return (
    <ColorProvider value={color}>
      <ColorPickerConsumer />
    </ColorProvider >
  )
}

现在任何孩子都可以使用该颜色。

下一步，您可以在下面的代码中使用（消费）颜色值：

ColorPickerConsumer.js：

import React, { Component } from "react";
import GlobalColor from "./GlobalColor";

class ColorPickerConsumer extends Component {
  static contextType = GlobalColor;
  render() {
    const color = this.context;
    return <div>{color}</div>;
  }
}
export default ColorPickerConsumer;

react-在react组件内部声明全局变量

3 个答案: