将JavaScript表达式插入到作为React prop的对象中

Question

我有以下代码无效

tabs.map(tabs, (tab) => (
    <Tab options={{'option':{tab.key === 'value'}}}>
        ...
    </Tab>
));

我的问题是some.key，这是一个错误，因为我显然没有正确地插入这个表达式。

有人能告诉我我需要做什么吗？我无法在单独的表达式中执行此操作，因为options依赖于映射的tab。

Answer 1

这不是对象文字的有效语法。另外，假设tabs是可迭代的，map()的第一个参数应该是映射函数。

以下内容应该有效：

tabs.map(tab => (
    <Tab options={{option: tab.key === 'value'}}>
        ...
    </Tab>
));

为了使其更清晰，请在渲染组件之前定义options：

tabs.map(tab => {
    const options = {option: tab.key === 'value'};

    return (
        <Tab options={options}>
            ...
        </Tab>
    );
});