如何在类中使用变量
介绍
变量以值的形式存储数据，这些值可能会或可能不会被修改到当前上下文中。它们可以使用各种可用的数据类型来声明，具体取决于编程语言或脚本语言。在本指南中，我们将学习如何在类中声明和使用各种类型的变量，包括 this关键字、static、props 和状态变量。
使用 This 关键字
变量的范围可能因情况而异，但this关键字通常根据其使用的不同范围或上下文引用 JavaScript 元素。
例如，如果你将关键字this控制到全局范围，那么你将能够获取空对象。
console.log(this);
但是如果您想使用内置的 JavaScript 功能或基于浏览器的功能，那么可以使用窗口对象。
window.alert("this is test alert")
这同样适用于使用全局范围的函数。
const thisFunction = function () {
return "Hello World";
}
let msg = thisFunction()
console.log(msg)
在 React 组件类中，可以将引用类属性（例如 props 和 state）的方法定义到当前上下文中。但是，对于组件的方法，您可以访问this.state和this.props，并且您需要将此上下文的 React 组件绑定到这些方法。
例如，假设您有一个带有提交方法的表单。
import React, { Component } from "react";
import { render } from "react-dom";
class App extends Component {
constructor() {
super();
this.state = {
name: "React",
};
// Binding method
this.onFormSubmit = this.onFormSubmit.bind(this);
}
onFormSubmit() {
console.log("Form Submitted");
}
render() {
return (
<div>
<div>
<form>
<input type="text" />
<button onClick={this.onFormSubmit}>Submit</button>
</form>
</div>
</div>
);
}
}
render(<App />, document.getElementById("root"));
在此示例中，组件有一个名为onFormSubmit()的方法，但请注意类的构造函数。该方法使用 'this' 关键字绑定到当前上下文。
将this关键字绑定到类方法使您能够使用this.props和this.state访问组件的 props 和 state 。
因此，当您尝试在绑定后访问任何道具时，请使用如下示例中给出的道具值。
onFormSubmit() {
console.log(this.props.formValues);
}
使用静态作为变量类型
静态变量可以在 React 类中使用，就像其他不同类型的变量可以访问它一样。不过，不同之处在于，静态变量的作用域可以修改，而它不能被修改。
例如，如果使用静态或固定值，则可以声明和使用它。
import React, { Component } from "react";
import { render } from "react-dom";
class App extends Component {
// Declaring static variable
static num1 = 3.1416;
constructor() {
super();
}
render() {
return (
<div>
<div>Accessing local static number variable : {this.num1}</div>
</div>
);
}
}
render(<App />, document.getElementById("root"));
在上面的例子中，有一个名为num1的静态变量，其值是固定的。这意味着没有人可以将其值更改为当前组件，但他们可以将其用于渲染目的。
同样的，状态对象也可以作为静态值。
import React, { Component } from "react";
import { render } from "react-dom";
class App extends Component {
state = {
name: 'Hello World',
age: '30'
};
render() {
const { name, age } = this.state;
console.log(this.state)
return (
<div>
</div>
);
}
}
render(<App />, document.getElementById("root"));
在上面的例子中，状态对象将是静态的，这意味着我们可以将它传递给子组件，它将充当常量值。
使用状态变量
State是 React 中广泛使用的术语之一。它用于管理基于组件的数据传输，您可以在其中声明键值对并根据功能需求对其进行修改。
该状态可以声明到构造函数中或作为静态对象。
constructor() {
super();
this.state = {
name: "React",
students: [
{
id: 123,
name: "Student 1"
},
{
id: 456,
name: "Student 2"
},
{
id: 789,
name: "Student 3"
}
]
};
}
在这个例子中，创建了状态变量，称为students，它由一个对象数组组成，可以像这样访问：
render() {
// Using state value
const { students } = this.state;
return (
<div>
// using state value for rendering
</div>
);
}
可以看到，可以通过this.state访问状态值，通过使用this关键字将其绑定到当前类上下文。
将 Props 值分配给变量
Props 是只读属性，或者类的属性实例，它们是将数据从父组件传递到子组件的一种方式。
通常，props 作为变量用于将动态或处理后的数据传递给子组件，以便子组件可以使用和处理它。
例如，父组件中有一个对象数组，如下例中所述。
constructor() {
super();
this.state = {
name: "React",
students: [
{
id: 123,
name: "Student 1"
},
{
id: 456,
name: "Student 2"
},
{
id: 789,
name: "Student 3"
}
]
};
}
现在您可以将状态变量students传递给子组件。
import React, { Component } from "react";
import { render } from "react-dom";
import Demo1 from './Demo';
class App extends Component {
constructor() {
super();
this.state = {
students: [
{
id: 123,
name: "Student 1"
},
{
id: 456,
name: "Student 2"
},
{
id: 789,
name: "Student 3"
}
]
};
}
render() {
return (
<div>
<Demo1
students={this.state.students}
/>
</div>
);
}
}
render(<App />, document.getElementById("root"));
在此示例中，Demo1是子组件之一。除了子组件之外，还将传递students附加属性，并且您可以从子组件中访问 props 值，如下所示：
import React, { Component } from "react";
class Demo1 extends Component {
constructor() {
super();
this.state = {
name: "React",
};
}
render() {
const { students } = this.props;
return (
<div>
{
students.map((item) => {
return (
<div>Student name is : {item.name}</div>
)
})
}
</div>
);
}
}
export default Demo1
如上例所示，父组件中有一个额外的属性，名为students。在 render 方法中，实现了 map 来遍历对象数组。
这是将数据以 props 的形式从父组件传递到子组件的标准方法之一。
Const 作为变量
变量const是出于特定原因存储静态数据或值的主要选项之一。在大多数情况下，const值不会用于修改。
您可
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~