在 React 中访问对象的动态属性

Question

我正在检查 alertDetails 对象中的“all”字符串中是否存在占位符，所以我的问题是我需要访问根据用户输入动态显示的电子邮件、短信、传真属性 (该代码是警报框的一部分，用户可以在其中选择通过不同的传递方法发送警报）所以我将所有可能的传递方法保存在一个数组中并尝试如下所示；

Const delmethod=[“email”,”sms”,”fax”]

for(let i=0;i<delmethod.length;i++)
{
Console.log(alertDetails &&
            alertDetails.alertMessage &&
            alertDetails.alertMessage[${lang}] &&
            alertDetails.alertMessage[${lang}].all
            ? alertDetails.alertMessage[${lang}][‘${delmethod(i)}’].includes('placeholder')
            : false;
   }

P.S：属性“全部”是固定的，只是电子邮件传真会根据用户的输入而改变，总而言之，如果“占位符”存在于任何字符串（所有、电子邮件、传真、短信）中我尝试的方法只是打印 del 方法数组，我将不胜感激，谢谢！

Answer 1

您的代码存在多个问题。您不能只使用 ${lang}。如果要使用 template literals.

，则必须用反引号 (`) 将字符串括起来

要访问对象的属性，您需要一个键，即您已经拥有的字符串，因此在这种情况下根本不需要模板文字。

当您按索引访问数组时，您需要使用 [] 而不是 ()，因此请使用 delmethod[i] 而不是 delmethod(i)。另外确保 property exists on an JavaScript object.

const delmethod = ["email", "sms", "fax"];

const alertDetails = {
  alertMessage: {
    en: {
      all: "emailsfsdfsdfsd",
      fax: "placeholder",
      sms: "sdkjföskjfsödkj"
    },
  },
};

const lang = "en";

for (let i = 0; i < delmethod.length; i++) {
  if (
    alertDetails &&
    alertDetails.alertMessage &&
    // use backticks ` when trying to use template literals
    alertDetails.alertMessage[`${lang}`] &&
    // there is actually no need for template literals here
    alertDetails.alertMessage[lang].all &&
    // you need to make sure "sms" or "fax" or "email" key actually exist on the object
    alertDetails.alertMessage[lang][delmethod[i]] &&
    alertDetails.alertMessage[lang][delmethod[i]].includes("placeholder")
  ) {
    console.log(
      `alertDetails.alertMessage[${lang}][${delmethod[i]}] does have a placeholder`
    );
    console.log(true);
  } else {
    console.log(
      `alertDetails.alertMessage[${lang}] does NOT have property ${delmethod[i]} or does NOT have a placeholder`
    );
    console.log(false);
  }
}

在 React 中访问对象的动态属性

Accessing dynamic properties of an Object in React

javascript

arrays

boolean

object

reactjs