通过变量将自定义 CSS class 添加到返回的 jsx

Question

我创建了一个自定义组件，它本质上是 returns html 标记，以便根据传递给组件的值显示内容。为简洁起见，这里有一个简化版本：

interface ContainerProps {
    position?: string;
    content?: string;
    class?: string;
}

const CardContainer: React.FC<ContainerProps> = ({ position = "right", content = "n/a", class = "" }) => {
    
    if ( position.trim().toLowerCase() === "right" ) {
        return <><div className="ion-float-right" >{content}</div><div className="clear-right"></div></>
    } else if ( position.trim().toLowerCase() === "left" ) {
        return <div className="ion-float-left">{content}</div> 
    } else {
        return null
    }
    
};

export default CardContainer;

效果很好，但我现在需要能够将 css class 名称传递给组件。但是，我不知道如何将“class”属性添加到返回的 html/jsx.

我尝试了如下各种代码。然而，在所有情况下，代码输出为实际 html 而不是 prop:

的值

return <div className="ion-float-left" + {class}>{content}</div> 

return <div className="ion-float-left {class}" >{content}</div> 

return <div className="ion-float-left class">{content}</div>

我还绝望地尝试了其他一些随机的东西，这些通常会导致编译错误。达到预期结果的最佳方法是什么，例如：

return <div className="ion-float-left myClassNameHere">{content}</div>

Answer 1

return

{content}

Answer 2

这就像将一个字符串插入另一个字符串或将它们相加。您可以使用 classname={"yourclasse" + theDynamicClass} 或 className={yourClass ${dynamicClass}} （介于``）

通过变量将自定义 CSS class 添加到返回的 jsx

Add custom CSS class via variable to returned jsx

typescript

reactjs

ionic-react