React向组件添加“未定义”类

Question

我的项目中有多个组件，其中大多数是用于特定内容的简单容器，带有一些样式。它们通常看起来像这样-

function Portion(props) {
    return (
        <div id={props.id} className={`portion ${props.className}`}>
            {props.children}
        </div>
    )
}

我有多余的${props.className}，因此可以根据需要轻松添加更多课程。现在的问题是，如果该元素没有多余的类，React将添加一个undefined类。

如何避免这种情况？

Answer 1

尝试使用

${props.className || ""}

Answer 2

您可以添加条件；

className={`portion ${props.className || ””}`}