javascript - 如何从对象数组的构造函数中访问值

Question

我有一个 react 组件maintoolbar.tsx，它有一个网格对象作为 Prop 传递给它

import React from 'react';
import { Grid } from '../grid';

interface PropsInterface {
  grid: Grid;
}

const MainToolbar: React.FC<PropsInterface> = (props: PropsInterface) => {
  const { grid } = props;
  const test = grid.mainToolbar.shapes[0].name;
//                                       ^ doesnt return the name
  const newNode = () => {
    grid.newNode();
  };

  return (
    <div className='main-toolbar'>
     ...
    </div>
  );
};

export { MainToolbar };

这就是我返回的内容，但是如何访问 this.name 的值？

class Square {
  constructor(nodes) {
    this.name = 'square';

我从 props 获取的网格对象有一个对象数组

import { Square } from './components/square';
class Grid {
  constructor() {
    this.mainToolbar = {
      shapes: [Square],
    };
  }
}
export { Grid };

最后是正方形

class Square {
  name: string;

  constructor(nodes: NodesInterface) {
    this.name = 'square';
  }
}

export { Square };

如果执行console.log(grid.mainToolbar.shapes);我得到了这个我以前没见过的东西

如果我这样做 console.log(grid.mainToolbar.shapes[0], ' type ' , typeof grid.mainToolbar.shapes[0]); 我得到

更新

添加

interface MainToolbarInterface {
  [key: string]: any;
}
class Grid
  mainToolbar: MainToolbarInterface;

  constructor() {
    this.mainToolbar = {
      shapes: [new Square(this)],
    };
  }

给了我名字，显然有一个不对，应该是什么？

Answer 1

在您的 Grid 构造函数中。你有

constructor() {
  this.mainToolbar = {
    shapes: [Square],
  };
}

这使得 shapes = 一个以 Square 类作为其第一个元素的数组。

尝试

constructor() {
  this.mainToolbar = {
    shapes: [new Square()],
  };
}

如果您不想在那里初始化它，这就是类型定义。然后改为

constructor() {
  this.mainToolbar = {
    shapes: [],
  }: {
    shape: Square[]
  };
}

<小时/>

更新后。对于接口(interface)类型。

interface MainToolbarInterface {
  shapes: Array<Square>;
}

class Grid
mainToolbar: MainToolbarInterface;

constructor() {
  this.mainToolbar = {
    shapes: [new Square(this)],
  };
}

或形状:Square[];(如果您愿意)。