Question

我要导入一些文件以构建对象：

// otis.ts
export const otisHeadline = 'Realizing the office of the future for UTC';
export const otisPreview = toCloudinaryUrl('otisPreview1.png');
export const otisClientName = 'Otis';
export const otisClientUrl = 'otis';

export const otisPreviewItem: PreviewTileProps = {
  headlineText: otisHeadline,
  client: otisClientName,
  clientUrl: otisClientUrl,
  backgroundImage: {
    desktop: otisPreview,
  },
};

和

// sm.ts
const smHeadline = 'Connecting an enterprise brand to a consumer audience';
const smClientName = 'SM';
const smClientUrl = 's-m';
const smPreview = toCloudinaryUrl('smPreview.png');

export const smPreviewItem: PreviewTileProps = {
  headlineText: smHeadline,
  client: smClientName,
  clientUrl: smClientUrl,
  backgroundImage: {
    desktop: smPreview,
  },
};

然后将otisPreviewItem和smPreviewItem都导入到这里的主文件中：

// ss.ts
import { otisPreviewItem } from './otis';
import { smPreviewItem } from './s-m';

export const module8: Preview = {
  tiles: [otisPreviewItem, smPreviewItem]
}

但是在渲染时会出现错误：

TypeError: Cannot read property 'clientUrl' of undefined

因此对于我的调试过程，我做了console.log(module8)，输出是这样的：

{ tiles: 
   [ undefined,
     { headlineText: 'Connecting an enterprise brand to a consumer audience',
       client: 'SM',
       clientUrl: 's-m',
       backgroundImage: [Object] } ] }

这些类型是：

export interface PreviewTileProps {
  headlineText: string;
  client: string;
  clientUrl: string;
  backgroundImage: {
    desktop: string;
    mobile?: string;
  };
  overlay?: string;
}

export interface Preview {
  tiles: PreviewTileProps[];
}

从理论上讲这应该起作用...但是我不知道为什么tiles中的第一项总是不确定的。如果我将该对象硬编码到module8中，它将可以使用，但是导入它似乎不起作用...

对于我尝试导入并放置在此处的任何对象，都会发生这种情况。不只是otisPreviewItem

我在这里错过了什么吗？

Answer 1

看起来您导入的文件缺少右引号。

Answer 2

我假设您正在通过访问module8来访问Component.render方法中的this['module8'].clientUrl。是吗？

如果没有，您能告诉我们您当前的组件实现吗？

导入对象并在数组中使用它会否使第一项不确定？

2 个答案: