小编Gha*_*dir的帖子

我对 Reactjs 比较陌生，所以我可能会遗漏一些明显的东西：

我有一个组件（DisplayFlags.js），它根据之前选择的大陆显示国家/地区国旗以及国家/地区名称。我已完成所有设置：所有可能的旗帜图像都存在于本地，我还有一个名为“myCountries”的 js 对象，它将每个大陆映射到其国家/地区，并将每个国家/地区映射到其名称+本地旗帜图像名称。这是其中的一部分：

const myCountries ={
    "north-america": {
        "US": {
            "name": "United States",
            "picPath": "flag-of-United-States.png"
        },
        "UM": {
            "name": "United States Minor Outlying Islands",
            "picPath": "flag-of-United-States-Minor-Outlying-Islands.png"
        },
        "CA": {
            "name": "Canada",
            "picPath": "flag-of-Canada.png"
        },
        "MX": {
            "name": "Mexico",
            "picPath": "flag-of-Mexico.png"
        },
//etc
},
"south-america":{
  "AR": {
            "name": "Argentina",
            "picPath": "flag-of-Argentina.png"
        },
        "BO": {
            "name": "Bolivia",
            "picPath": "flag-of-Bolivia.png"
        },
//etc
}
}

我打算做什么：循环遍历先前选择的大陆的所有国家/地区，并将“name”和“picPath”作为道具传递给另一个组件 SingleCountry.js，后者依次显示它们。我的问题是导入：我通常只写（示例）：

import randomImage from '../../img/icons/some-image-name.png'

然后使用 randomImage 作为我的组件中 img 元素的 src 。在这种情况下，有没有办法从 props 中传递的路径导入图像？就像是：

import …

我在我的 Angular 项目中使用 PrimeNG。我试图使表格元素在响应时以“堆栈”模式显示，根据文档，这应该是一件简单的事情。

然而它在我的代码中不起作用，对于小屏幕尺寸，行不会堆叠：

这是我的component.html：

<div class="card">
  <p-table responsiveLayout="stack" [value]="questions">
    <ng-template pTemplate="caption">
      <h5 class="p-m-0">Trial Table</h5>
    </ng-template>

    <ng-template pTemplate="header" let-columns>
      <tr>
        <th pSortableColumn="main">Question <p-sortIcon field="main"></p-sortIcon></th>
        <th pSortableColumn="content">Content <p-sortIcon field="content"></p-sortIcon></th>
        <th pSortableColumn="timeToRead">Time To Read <p-sortIcon field="timeToRead"></p-sortIcon></th>
        <th pSortableColumn="timeToRecord">Time To Record <p-sortIcon field="timeToRecord"></p-sortIcon></th>
      </tr>
    </ng-template>

    <ng-template pTemplate="body" let-question let-columns="columns">
      <tr>
        <td><span class="p-column-title">Question</span>{{question.main}}</td>
        <td><span class="p-column-title">Content</span>{{question.content}}</td>
        <td><span class="p-column-title">Time To Read</span>{{question.timeToRead}}</td>
        <td><span class="p-column-title">Time To Record</span>{{question.timeToRecord}}</td>
      </tr>
    </ng-template>
  </p-table>
</div>

这是我的简单版本component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-questions', …

我在迭代节点列表以更改这些节点内的某些元素时遇到问题。这是 HTML：

 <div class="row one-dish-row dish1">
        <div class="dishes-container">
          <h4>Falafel</h4>
          <p></p>
        </div>
        <div class="prices-container">
          <h5></h5>L.L.
        </div>
      </div>

      <div class="row one-dish-row dish2">
        <div class="dishes-container">
          <h4>Falafel</h4>
          <p></p>
        </div>
        <div class="prices-container">
          <h5></h5>L.L.
        </div>
      </div>

      <div class="row one-dish-row dish3">
        <div class="dishes-container">
          <h4>Falafel</h4>
          <p></p>
        </div>
        <div class="prices-container">
          <h5></h5>L.L.
        </div>
      </div>

我创建了一个包含类“.one-dish-row”的所有元素的节点列表（作为数组），并尝试访问其中一个元素中的 h4 元素来更改它。这是js：

  const dishNodeList = Array.from(document.querySelectorAll('.one-dish-row'));
    dishNodeList[1].find("h4").innerHtml = "Hello I am Ghadir";

它不起作用（“沙拉三明治”没有变成“你好，我是加迪尔”）。我在控制台中收到以下错误：未捕获类型错误：dishNodeList[1].find 不是函数。

我不知道我的代码到底出了什么问题。任何帮助表示赞赏。