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

杀手DD

我在某个组件的CSS文件中有一个类,该类会使该组件中的某些元素不可见。我想div在单击按钮时将其添加到唯一的类,而该按钮恰好在完全不同的组件中。我知道我将如何使用Vanilla javascript做到这一点,但是使用React我一无所知。
我决定使用
CodeSandbox使其更易于签出/编辑https : //codesandbox.io/s/pedantic-keldysh-yhw2m ? file = / src / components / FaceRecogBox / FaceRecogBox.css PS:在我正在尝试使用LinkedInput.js中的按钮将FaceRecogBox组件添加.vanishmain-containerdiv中

lromano97

您可以执行以下操作:

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;

我将保留到沙箱的链接更新

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何将CSS类添加到GoogleMaps标记?

来自分类Dev

如何将活动的CSS类添加到Wordpress中的链接

来自分类Dev

如何将CSS关键帧添加到vaadin组件中?

来自分类Dev

如何将CSS类添加到导航元素中的元素

来自分类Dev

如何将CSS类添加到MVC中的Action链接

来自分类Dev

如何使用jQuery将折叠类动态添加到同一类的多个div

来自分类Dev

如何将更改添加到python中的类

来自分类Dev

如何将CSS类添加到Leaflet Control

来自分类Dev

如何将img动态添加到div

来自分类Dev

ReactJs,如何将类名添加到相同div的Map中

来自分类Dev

如何将活动的CSS类添加到Wordpress中的链接

来自分类Dev

如何通过jQuery将CSS添加到类中?

来自分类Dev

如何将CSS添加到没有类或ID的HTML div中

来自分类Dev

如何将CSS类添加到style.css中?

来自分类Dev

如何将动态成员名称和值添加到ExpandoObject类的实例?

来自分类Dev

如何将CSS添加到动态创建的表

来自分类Dev

当使用jquery单击特定li时,如何将css类添加到列表中?

来自分类Dev

如何将CSS类添加到批准的注释中

来自分类Dev

如何将CSS动态添加到SAPUI5中的控制器

来自分类Dev

如何将 CSS 添加到 Angular Materials 组件?

来自分类Dev

如何将css类添加到组件的根目录?

来自分类Dev

如何将类添加到列表中?

来自分类Dev

如何将 css 添加到层次结构中第 4 级的特定 div?

来自分类Dev

如何将 css 类添加到 sitecores MVC HtmlHelper 中的字段的封闭标记?

来自分类Dev

如何将更改事件动态添加到 angular 4 中的外部下拉列表组件

来自分类Dev

如何将动态类添加到 angular 中的循环元素

来自分类Dev

如何将类添加到 div 中的当前活动 div

来自分类Dev

如何将子项添加到带有类的嵌套 div 结构中

来自分类Dev

如何将按钮动态添加到 div

Related 相关文章

  1. 1

    如何将CSS类添加到GoogleMaps标记?

  2. 2

    如何将活动的CSS类添加到Wordpress中的链接

  3. 3

    如何将CSS关键帧添加到vaadin组件中?

  4. 4

    如何将CSS类添加到导航元素中的元素

  5. 5

    如何将CSS类添加到MVC中的Action链接

  6. 6

    如何使用jQuery将折叠类动态添加到同一类的多个div

  7. 7

    如何将更改添加到python中的类

  8. 8

    如何将CSS类添加到Leaflet Control

  9. 9

    如何将img动态添加到div

  10. 10

    ReactJs,如何将类名添加到相同div的Map中

  11. 11

    如何将活动的CSS类添加到Wordpress中的链接

  12. 12

    如何通过jQuery将CSS添加到类中?

  13. 13

    如何将CSS添加到没有类或ID的HTML div中

  14. 14

    如何将CSS类添加到style.css中?

  15. 15

    如何将动态成员名称和值添加到ExpandoObject类的实例?

  16. 16

    如何将CSS添加到动态创建的表

  17. 17

    当使用jquery单击特定li时,如何将css类添加到列表中?

  18. 18

    如何将CSS类添加到批准的注释中

  19. 19

    如何将CSS动态添加到SAPUI5中的控制器

  20. 20

    如何将 CSS 添加到 Angular Materials 组件?

  21. 21

    如何将css类添加到组件的根目录?

  22. 22

    如何将类添加到列表中?

  23. 23

    如何将 css 添加到层次结构中第 4 级的特定 div?

  24. 24

    如何将 css 类添加到 sitecores MVC HtmlHelper 中的字段的封闭标记?

  25. 25

    如何将更改事件动态添加到 angular 4 中的外部下拉列表组件

  26. 26

    如何将动态类添加到 angular 中的循环元素

  27. 27

    如何将类添加到 div 中的当前活动 div

  28. 28

    如何将子项添加到带有类的嵌套 div 结构中

  29. 29

    如何将按钮动态添加到 div

热门标签

归档