0

如何跨浏览器调用动态函数名？我已经看到了一些方法来做到这一点，但没有一个像下面这样“优雅”。问题是它在 Chrome 中工作，但在 Firefox 和 Safari 中都没有。

如果我打电话

const component = "a";
this[component]() // console: Called a
this[`${component}`]() // console: Called a

在 Chrome 上它工作正常，该函数被正确调用。在 Firefox 上它说

TypeError: this[("" + component)] is not a function

如果我想实现这一点，我该怎么做？

编辑以添加更多上下文

框架是 React。

例子：

    export default class MyComp extends Component {

    a() {
        console.log("Called a");
    }
    b() {
        console.log("Called b");
    }
    c() {
        console.log("Called c");
    }

    renderAThing(component) {
        return this[component]();
    }

    render() {
        return this.renderAThing("a");
    }
}

如果我在 render() 中直接调用这个组件，它就可以工作。

编辑 2这似乎是一个转译问题，而不是浏览器问题。正如您所指出的，该代码对 Chrome 和 Firefox 有效。我正在与 Meteor 和 Babel 一起使用 React。感谢@Jaromanda X 的提示。

仅供参考，缩小（=生产）的 Meteor 代码也不能在 Chrome 上运行。

4

3 回答 3

0

由于这不是浏览器问题，而是转译问题，我最终以完全不同的方式处理它。它是这样的：

export default class DateTimePicker extends Component {
getComponentValue(component) {
    const { value } = this.props; // React properties

    if (!value) return null;
    if (component === "a") return value.getA();
    if (component === "b") return value.getB();
    return null;
}

renderA(component) {
    const componentValue = this.getComponentValue(component);

    return (
        <div>{componentValue}</div>
    );
}

render() {
    return (
        <div>
            {this.renderA("a")}
        </div>
    );
}
}

我不是很满意，但我想现在还可以。

于 2018-02-28T16:40:05.180 回答
0
于 2018-02-28T11:08:12.860 回答
0

此代码适用于 Firefox 58：

function a() {
  console.log("Called a");
}

function b() {
  console.log("Called b");
}

function c() {
  console.log("Called c");
}

const component = "a";
this[component]() // console: Called a
this[`${component}`]() // console: Called a

但我想你的问题是this关键字。您可以将其替换为window以避免它。但这一切都取决于您的代码在哪里。

于 2018-02-28T10:49:43.473 回答