条件类名三元运算符渲染

Question

我有一个带有条件 className 样式的 div。

<div className={type === "myType" && classes.myClass}>

所以如果类型是myType，我想申请myClass。但是如果类型不是myType 我会收到警告：

Warning: Received `false` for a non-boolean attribute `className`.

If you want to write it to the DOM, pass a string instead: className="false" or className={value.toString()}.

If you used to conditionally omit it with className={condition && value}, pass className={condition ? value : undefined} instead.
    at div

在那种情况下，我通常会这样替换我的条件：

<div className={type === "myType" ? classes.myClass : null}>

但警告建议我使用undefined 而不是null。

所以我想问什么更好用，为什么？

Answer 1

我认为最好的方法都不是，因为类名是一个字符串，所以最好的做法是返回相同类型的数据。

代码如下： <div className={type === "myType" ? classes.myClass : ""}>

Answer 2

你应该使用clsx之类的东西。

这比警告建议的本机解决方案要干净得多，clsx 允许您执行以下操作：

import clsx from 'clsx';
 
// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'
 
// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'
 
// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'
 
// Arrays
clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'
 
// Arrays (variadic)
clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);
//=> 'foo bar baz hello there'
 
// Kitchen sink (with nesting)
clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');
//=> 'foo bar hello world cya'