javascript - 如何在js中从字符串构建变量?

标签 javascript reactjs

我想创建一个动态函数,从字符串中返回一个变量。我正在使用 ES6 中的模板字符串,但我不知道以后如何调用它。我需要传递一个将对象作为引用的变量。

const checkDeviceWidth = type => {
    if (documentWidth > 1200) return `${type}Options`;
    if (documentWidth > 414) return `${type}MediumOptions`;
    return `${type}MobileOptions`;
  };

...

<Lottie
  ref={backgroundImg}
  isClickToPauseDisabled={true}
  speed={1}
  options={checkDeviceWidth('background')}></Lottie>

根据参数返回对象

const backgroundOptions = {
    loop: true,
    autoplay: true,
    animationData: background.default,
  };
  const backgroundMediumOptions = {
    loop: true,
    autoplay: true,
    animationData: backgroundMedium.default,
  };

有了这个,我得到一个错误,在选项中我必须传递一个对象而不是一个字符串。如果没有 eval() 函数,以后如何调用它?我正在使用 React

最佳答案

你可以把你的常量放到对象中

 const myObject = {
  backgroundOptions: {
    loop: true,
    autoplay: true,
    animationData: background.default
  },
  backgroundMediumOptions: {
    loop: true,
    autoplay: true,
    animationData: backgroundMedium.default
  }
};

然后得到正确的属性

  const checkDeviceWidth = type => {
    if (documentWidth > 1200) return myObject[`${type}Options`];
    if (documentWidth > 414) return myObject[`${type}MediumOptions`];
    return myObject[`${type}MobileOptions`];
  };

关于javascript - 如何在js中从字符串构建变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58691150/

相关文章:

javascript - react 路由器2,返回404状态

javascript - ng-view 路由模板是否反射(reflect) ajax 请求导致的更改?

javascript - 如何将 .prev 与 Meteor 事件一起使用?

javascript - 如何在 native react 中验证 TextInput 值?

javascript - react : Axios Network Error

javascript - 在 div 元素位置 : fixed; display: table-cell; set 上不能正确呈现边距/宽度

javascript - 阴影模糊的 Fabric.js 边界框

javascript - 类型 'xxx' 上不存在属性 'Readonly<{}>'

javascript - Swiper.js 自动播放的自定义停止和播放按钮(React/Next)

reactjs - 如何在本地插件中将 Gatsbys wrapPageElement 与 Typescript 一起使用?