React模型类例子

迪鲁宾
219 阅读3分钟

这篇文章涵盖了一个关于如何添加模型类的一步步教程

  • 如何在react应用中创建一个模型类
  • 在Angular应用程序中何时使用类或接口来创建模型？
  • 在react应用中用对象数组初始化模型类
  • 在react渲染函数中显示模型类的数据

React是前端UI框架，它基于组件从用户那里获得输入并将其发送到数据库，同时将数据显示在浏览器上。

为了使前端和后端之间的互动，模型类有助于简化通信。

在typescript中，模型类可以是接口类型或类，但在javascript中，我们只能用ES6以后的版本来创建类，你可以查看Angular应用程序中的模型类例子。

模型类是一个对象的简单属性，它持有一个实体的信息。

例如，让我们用ES6类的关键字创建一个Employee类。

文件名是Employee.js 我们在src/model中创建Employee.js的JavaScript文件。

让我们在模型类中添加属性id、name

你可以在创建对象时添加setter或getter或构造函数来初始化这些属性。

export class Employee{
    constructor(id,name) {
      this.id = id;
      this.name = name;
    }
  }

为了使用这个类，你必须在react应用程序中导入。

import { Employee } from './Employee';

接下来，你如何创建一个类的对象并在react应用中使用它。

  • 在下面的例子中，创建了一个自定义组件

  • 添加了默认状态的构造函数，存储雇员对象的数组。

  • 在真实的应用中，数据是以javascript类对象的形式来自REST API。

  • 现在，对象的数组被存储在反应状态对象中。

  • 在渲染中，从状态中获取数据，使用数组地图进行迭代，并在有序的列表中显示。

    下面是一个反应代码的例子

import React from 'react';
import './style.css';
import { Employee } from './Employee';
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      emps: [new Employee(1, 'John'), new Employee(2, 'Ram'),new Employee(3, 'Franc')]
    };


  }
  render() {
    const listItems = this.state.emps.map((item) => {item.name});

    return ({listItems});
  }
}
export default App;

Typecript中的React模型类例子

在typecript react应用程序中，我们有更多强大的关键字来创建类。

我们可以使用interface 或class 关键字来创建一个模型类。

让我们用interface 关键字创建一个模型类。

export class Employee {
  private id: number;
  private firstName: string;
  private lastName: string;
  private salary: number;

  constructor(id: number, firstName: string, lastName, salary: number) {
    this.id = id;
    this.firstName = firstName;
    this.lastName = lastName;
    this.salary = salary;
  }

  getName(): string {
    return `${this.firstName} ${this.lastName}`;
  }

  getYearlySalary(): number {
    return 12 * this.salary;
  }
}

创建一个react typescript组件。

在 react typescript 组件中，你必须使用import 关键字加载。

  • 创建模型类对象的数组，将其存储在一个变量中
  • 将其存储在react state对象中
  • 使用数组映射函数在react组件中读取和显示

React模型接口示例

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import { Employee } from './Employee';

interface AppProps {}
interface AppState {
  name: string;
}

class App extends Component {
  employees: Employee[] = [
    new Employee(1, 'john', 'sedwik', 5000),
    new Employee(2, 'Ram', 'Kumar', 6000),
    new Employee(3, 'Fran', 'andrew', 10000)
  ];
  constructor(props) {
    super(props);
    this.state = {
      data: this.employees
    };
  }

  render() {
    const emps = this.state.data;
    console.log(emps)
    let result = emps.map(item => {item.firstName}-{item.salary});

    return (
      
        {result}
      
    );
  }
}

render(, document.getElementById('root'));

Typecript中的接口

  • 接口有助于数据验证的代码类型检查
  • 这些接口只在编译/跨编译阶段可用，在生产中无法使用。
  • 接口定义了数据的类型，但不能创建一个接口的实例
  • 没有方法来处理如何添加/获取操作的问题
  • Typescript在运行时被编译成javascript，因此，这些在javascript中是不可用的。

Typecript中的类

  • 从ES6版本开始，类在javascript/typescript中是可用的。
  • 这也有助于进行类型检查。
  • 在编译/反编译过程中，这将是可用的，并产生类的代码。
  • 你可以为数据操作添加自定义方法或setter/getter或构造函数。

总结

总而言之，我们可以在react应用程序中创建一个类或接口来保存模型数据。在javascript中，我们只能使用类的关键字，在typecript react组件中，我也会从接口开始进行类型检查，如果有任何数据操作方法，将接口转换为类并在react应用中使用。

avatar
文章
阅读
粉丝