react中style和className使用

阅读数:99 评论数:0

跳转到新版页面

分类

html/css/js

正文

style的用法

<div style={{display: this.state.btnFlag ? "block" : "none"}}>按钮</div>

// 多个用,隔开
<div style={{display: this.state.btnFlag ? "block" : "none",
width: '20px'}}>按钮</div>

 

className用法

<div className={this.state.btnFlag ? "btn-show" : "btn-hide"}>按钮</div>

// 含有多个class
<div className={`btn-default ${this.state.btnFlag ? "btn-show" : "btn-hide"} ${this.state.btnFlag2 ? "btn-primary" : "btn-drange"} `}>按钮</div>
相关推荐
React-classnames库
react原生动态添加多个className会报错: import style from './style.css'
React项目调试
Redux DevTools 浏览器安装此插件，npm start之后，F12，点击Redux， 可跟踪Action以及state的变化。 React Deve
如何进行React组件单元测试
Javascript单元测试框架对比 1. Jasmine 带有断言, spies(用来模拟函数的执行环境)和mocks. 2. AVA <
react中使用prop-types检测props数据类型
在多人开发时，当被人使用自己定义的组件时，有可能出现类型传错的情况，而在自己的组件上加上prop-
React中import的用法
import defaultcomponent,{a,b,c...} from 'XXX'<br
React 组合与继承
包含关系 有些组件无法提前知晓它们子组件的具体内容. 在Sidebar和Dialog等展现通用容器的组件中特别容易遇到这种情况. 我们建议这些组件使用一个特殊的c
React状态提升
通常, 多个组件需要反映相同的变化数据, 这时我们建议将共享状态提升到最近的共同父组件中去. 示例:
React 表单
受控组件 在HTML中, 表单元素之类的通常自己维护state, 并根据用户输入进行更新. 而在React中, 可变状态通常保存在组件的state属性中, 并且只能通过使用se
React 列表和key
基础列表组件 function NumberList(props) { const numbers = pr
React 条件渲染
React中的条件渲染和Javascrip中的一样, 使用Javascrip运算符if或者条件运算符去创建元素来表现当前的状态, 然后让React根据它们来更新UI. <pre clas