Question

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

由于在arg函数中输入“ radio”有效，因此我决定控制台记录道具以查看道具返回的内容。它返回的无线电单词不带引号。因此，我尝试首先使用字符串模板'${prop}'将prop转换为字符串，并将其控制台正确记录为'radio'。但是仍然出现错误，即bannerImage找不到，告诉我函数arg的格式不正确或正确传输，即使它正确显示为“ radio”也是如此。感到困惑的是，以func arg键入'radio'可以起作用，但是用转换后的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，这实际上与传递给prop的格式格式化为字符串相同。不确定为什么传递的道具不起作用（请参见带注释的iconId代码）。感谢您的帮助和见解。

Answer 1

您必须以其他方式使用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}`);

传递的道具无法识别为字符串

1 个答案: