React条件className、空字符串和null

在开发React组件时，您经常需要根据条件将className属性应用于一个或多个元素。有时，根据条件可能会有两个或更多个可能的值。但有时，根据条件应用className，否则将完全为空。

有一种正确的方法来处理条件为空的className，也有一种不正确的方法。令人惊讶的是，不正确的方法非常常见，可以在网络上找到许多示例。考虑以下代码：

const MyComponent = ({ enabled }) => {
  return ( <div className={enabled ? 'enabled' : ''}> Hi </div> );
};

const OtherComponent = ({ enabled }) => {
  return ( <div className={enabled ? 'enabled' : null}> Hi </div> );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <>
    <MyComponent enabled={false} />
    <OtherComponent enabled={false} />
  </>
);

在这个代码示例中，我们定义了两个非常相似的组件。它们都根据enabled属性的值有条件地设置元素的className。如果enabled为false，第一个组件将将className设置为空字符串，而第二个组件将将其设置为null。

生成的输出非常相似。然而，如果仔细检查HTML，您会注意到第一个组件将呈现为<div class>Hi</div>，而第二个组件将呈现为<div>Hi</div>。这种标记（存在属性但没有值）相当不常见，您很少会在没有React的情况下看到这样的东西。这种细微的差别非常重要，可能是许多问题的根源，特别是在为具有/不具有任何类的元素编写CSS选择器时（例如[class]/:not([class])）。

因此，当您不想向元素添加className时，应优先使用null，而不是空字符串。它可以使标记更清晰，并可能有助于防止一些潜在问题。