如何将CSS类动态添加到组件中的div中

Question

我在某个组件的CSS文件中有一个类，这个类会使组件中的一些元素不可见。我只想在单击按钮时将这个类添加到div中，而按钮恰好位于一个完全不同的组件中。我知道如何使用Vanilla javascript来实现这一点，但对于React，我一无所知
我决定使用CodeSandbox:https://codesandbox.io/s/pedantic-keldysh-yhw2m?file=/src/components/FaceRecogBox/FaceRecogBox.cssPS：在FaceRecogBox组件中，我试图使用LinkedInput.js 中的按钮将.vanish类添加到main-containerdiv中

Answer 1

您可以执行以下操作：

import React from 'react';
import '../FaceRecogBox/FaceRecogBox.css'
const FaceRecogBox = ({ imageUrl, isDivVisible }) => {
// You should pass the condition as a prop to the FaceRecogBox
return (
<div>
<div className={`main-container ${!isDivVisible && "vanish"}`}>
<div className="brokenlines-container">
<h3>Drag and drop to upload <br/> Or <a href="/">browse</a> this device</h3>
</div>
</div>
<div className="faces">
<img src={imageUrl} alt="" className="faces"/>
</div>
</div> 
);
}
export default FaceRecogBox;

我将留下沙盒更新的链接