如何为子组件添加新类

Question

子组件

const Child = ({newClasses, children}) => {
return ( 
<div className = {`${basicClass} ${newClasses}`}>     
{children} 
</div>
)
}

export default Child 

母组件

const Parent = () => {
return ( 
<Child className = {classNew1 classNew2}> 
content 
</Child>
)
}

尝试获取<div class="basicClass classNew1 classNew2"></div>

但我得到了-<div class="basicClass undefined"></div>

告诉我如何正确地做？感谢的帮助

Answer 1

首先，由于您的Child组件需要名为newClasses的道具，因此您应该在父组件中为其命名：

const Parent = () => {
return ( 
<Child newClasses = {"classNew1 classNew2"}> 
content 
</Child>
)
}

这应该可以修复您未定义的问题

Answer 2

const Child = ({ className, children }) => {
return <div className={className.join(' ')}>{children}</div>;
};
const Parent = () => {
return <Child className={['classNew1', 'classNew2']}>content</Child>;
};