时间戳

首页 > 解决方案 > 将对象属性传递给函数以进行索引

javascript - 将对象属性传递给函数以进行索引

问题描述

我有一个网站的原始版本，其中一些元素应根据登录页面 url 进行更改。如果您登陆页面的根 url，您将看到原始版本。如果你登陆了url.com/variant1一些文本元素会改变，但不是全部。我创建了一个包含所有值的对象。所以它看起来像这样：

const websiteData = {
  original: {
    landingPage: {
      primaryHeadline: (
        <h1>Hello to original</h1>
      ),
      secondaryHeadline: (
        <h2>How you doing?</h2>
      ),
    }
  },
  variant1: {
    landingPage: {
      secondaryHeadline: (<h2>How are you?</h2>)
    }
  }
}

我想根据变体进行渲染，例如，如果我想获取当前版本网站的主标题，我会像这样对其进行索引： websiteData[version]["landingPage"]["primaryHeadline"]. 但是，当变体没有可用值时，我希望它默认恢复为原始版本。我想为这种情况编写一个函数，它基本上应该返回元素的变体版本，或者如果不存在，则返回原始版本。

const getElementFromVersionOrOriginal = (version, properties) => {
   websiteData[version][properties] ? 
   return websiteData[version][properties] :
   return websiteData["original"][properties]

显然上面的版本不起作用，因为我不知道如何输入属性。我通常也会质疑我的设置是否有意义，或者是否有更好的方法。我最后的手段是只为每个案例写出来，如下所示：

{funnelData[version]["landingPage"]["primaryHeadline"] ? 
 funnelData[version]["landingPage"]["primaryHeadline"] :
 funnelData[original]["landingPage"]["primaryHeadline"]}

但是如果其中一个版本没有属性，那么它已经失败了，说它在未定义中landingPage找不到，对吧？primaryHeadline

标签： javascriptreactjs

解决方案

也许你需要：

const getElementFromVersionOrOriginal = (version, properties) => {
   return (websiteData[version] || websiteData["original"])[properties];

推荐阅读