如何在反应中编写嵌套的三元运算符？

Question

我必须在 div 上写一个显示样式的条件，但我犯了一些错误，导致它无法正常工作。请帮助我更正此语法。这是我的代码

<div
style={item.settings && 'backdropSettings' in item.settings ? { 
item.settings.backdropSettings.value.includes('#') ? 
{background:item.settings.backdropSettings.value} :
{backgroundImage: `url(${item.settings.backdropSettings.value})`}
} : null}
> 
</div>

Answer 1

如果你做复杂的计算，不要把它放在你的渲染中，把它放在前面，这样更简单，这就是为什么你看不到你的错误。

尝试这样的事情（检查它是如何写的，不确定它是否 100% 正确）

const getStyle = (item) => {
    if (item.settings && 'backdropSettings' in item.settings) {
        const { backdropSettings } = item.settings;
        
        if (backdropSettings.value.includes('#')) {
            return `backgroundImage:${item.settings.backdropSettings.value}`
        } else {
            return `backgroundImage:url(${item.settings.backdropSettings.value})`
        }
    } 
    return null
}

return(
    <div style={getStyle(item)}>
    </div> 
);

这更具可读性，您可以轻松找到错误。希望对你有帮助。

如何在反应中编写嵌套的三元运算符？

How to write nested ternary operator in react?

javascript

reactjs

mern