时间戳

首页 > 解决方案 > 传递的道具未被识别为字符串

javascript - 传递的道具未被识别为字符串

问题描述

将 prop 从组件传递到模态窗口。道具（收音机）接收正常，但在尝试将其用于功能中的开关时，无法识别。它返回未找到错误“bannerImage”。但是当我在调用函数中简单地键入单词“radio”时，开关会工作并返回预期的“bannerImage”。

由于在函数 arg 中输入“radio”有效，我决定通过控制台记录道具以查看它返回的内容。它返回不带引号的单词 radio。所以我尝试首先使用字符串模板将道具转换为字符串'${prop}'，并将控制台正确记录到“收音机”。但是仍然出现错误，bannerImage not found 告诉我函数 arg 没有正确形成或正确传输，即使它正确显示为“无线电”。混淆输入 'radio' 作为 func arg 有效，但用转换后的 prop ('radio') 中的等效字符串替换 arg 不起作用。

 getHeaderImage = (modalType) => {
    switch (modalType) {
      case "radio":
        bannerImage = require('../../assets/images/weaa.png')
      break;
      default:
        // bannerImage = require('../../assets/images/weaa.png')
    }
    return bannerImage;
  }

 const { showModal, url, title, headerBgColor, modalType } = this.props;
    const iconId = `"${modalType}"`;
    bannerImage = this.getHeaderImage("radio");
    // bannerImage = this.getHeaderImage(iconId);
    console.log(modalType);
    console.log(iconId);

在 render() 部分中调用 func 时，它应该返回bannerImage 以根据开关情况显示。相反，除非我在调用函数中硬编码'radio'，否则我找不到bannerImage，这实际上与传递的格式化为字符串的道具相同。不确定为什么传递的道具不起作用（请参阅 iconId 的注释代码）。感谢您的帮助和见解。

标签： javascript

解决方案

你必须switch以不同的方式使用

getHeaderImage = (modalType) => {
    switch (true) {
      case modalType=="radio":
        bannerImage = require('../../assets/images/weaa.png')
      break;
      default:
        // bannerImage = require('../../assets/images/weaa.png')
    }
    return bannerImage;
}

更新

第二个问题是 iconId 中的额外引号 - 将其更改为

const iconId = `${modalType}`;


let modalType="radio";
const iconId = `"${modalType}"`;

if(iconId != "radio") 
  console.log(`Paradox? iconId=${iconId}, modalType=${modalType}`);

推荐阅读