我不知道为什么,但如果我在let
声明中声明它,我似乎无法调用const
或if/else
变量。
if (withBorder) {
const classes = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
} else {
const classes = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
}
return (
<div className={classes}>
{renderedResult}
</div>
);
如果我使用这个代码,它说classes is not defined
。
但是,如果我将const
更改为var
类已定义,但我收到有关classes used outside of binding context
and all var declarations must be at the top of the function scope
的警告
我怎么能解决这个问题?
你应该使用三元分配:
const classes = withBorder ?
`${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center` :
`${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`
正如其他评论/答案中所指定的那样,let
和const
被封锁范围,这就是为什么它们在你的例子中不起作用的原因。
对于DRYer代码,您还可以将三元组嵌套在字符串文字中:
const classes = `${withBorder ? styles.dimensions: ''} ${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`
let
和const
是块级范围,意味着它们只能在已定义的块中使用,即。 { // if defined in here can only be used here }
在这种情况下,我只需在if / else语句上面定义
let classes;
if (withBorder) {
classes = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
} else {
classes = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
}
替代方案(不确定它是好还是优雅):
const classes = (() => {
if (withBorder) {
return `${styles.circularBorder}...`;
} else {
return `${styles.dimensions}...`;
}
)();
不要使用if
-else
语句,而是使用三元表达式:
const classes = withBorder
? `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`
: `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
或者,只需在if
块之外声明它,这样你就可以摆脱重复:
let classes = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
if (withBorder) {
classes += ` ${styles.circularBorder}`;
// or if you care about the order,
// classes = `${styles.circularBorder} ${classes}`;
}
let
和const
是块级作用域,因此您必须在块之外定义它们。 var
工作,因为它提升了。
您可以在classes
块之前定义if
,如@finalfreq
要么
let classes = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`;
if (withBorder) {
classes += `${styles.circularBorder}`;
}
ESLint标准喜欢该行开头的运营商。除非在计算机时间循环中,否则也应抽象出长条件。
在这种特殊情况下,字符串也很长,所以我也会将它们抽象出来。出于一致性的原因,Bergi问题的方法是大多数麻烦都会削弱他的风格。
如果您熟悉三元组,这种方式可以使一切正常且易于阅读。
const styleWithBorder = `${styles.circularBorder} ${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`
const styleWithoutBorder = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`
const classes = isBorderedElement ? [ styleWithBorder ] : [ styleWithoutBorder ]
很简单,就这样做:
const genericStyle = `${styles.dimensions} ${styles.circularPadding} row flex-items-xs-middle flex-items-xs-center`,
classes = withBorder ? `${styles.circularBorder} ${genericStyle}` : genericStyle;
return (
<div className={classes}>
{renderedResult}
</div>
);
这也有一些清理,班级使用两次,只有circularBorder
是差异...