条件类名三元运算符渲染

Question

我有一个应用条件类名样式的 div。

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

所以我想申请myClass如果 type 是myType 。 但如果 type 不是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

你应该使用类似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'

Answer 2

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

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