Javascript React 中的内联样式 - null、undefined、empty-Object、inherit 或 none？

Question

在 React 中使用哪个最合适，为什么？

*注意：示例在 React jsx-syntax 中；

<div style={ condition ? {backgroundColor:'#d6f9dd'} : {} }>

<div style={ condition ? {backgroundColor:'#d6f9dd'} : undefined }>

<div style={ condition ? {backgroundColor:'#d6f9dd'} : null }>

<div style={ condition ? {backgroundColor:'#d6f9dd'} : 'inherit' }>

<div style={ condition ? {backgroundColor:'#d6f9dd'} : 'none' }>

Answer 1

就个人而言，如果我需要覆盖由单独的库附加的 css 属性，我只会使用样式属性。

在您提供的选项中，唯一有效的选项如下：

<div style={ condition ? {backgroundColor:'#d6f9dd'} : {} } />
<div style={ condition ? {backgroundColor:'#d6f9dd'} : undefined } />

React 期望样式属性为未定义或对象。

最重要的是，我会有条件地应用 css 属性本身而不是整个样式对象。

像这样：

<div style={{ backgroundColor: condition ? '#d6f9dd' : undefined }} />

那样的话，如果我需要应用多个样式属性，但其中一个取决于条件，即使条件不成立，另一个仍然可以应用。将属性设置为 undefined 相当于根本没有将它包含在样式对象中。

Answer 2

不要使用空对象。它们可以 return 真实，并且具有属性。

console.log(typeof {}.hasOwnProperty); // function

这可能会导致后续问题。如果想要内联样式，最好的选择是使用 undefined imo

Javascript React 中的内联样式 - null、undefined、empty-Object、inherit 或 none？

Javascript inline style in React - null, undefined, empty-Object, inherit, or none?

javascript

inline-styles

reactjs