继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【九月打卡】第二天 React的行内样式与CSS

uni_酷奇
关注TA
已关注
手记 28
粉丝 0
获赞 0

课程:React18 系统精讲

章节:React与TypeScript(3-10)

讲师:阿莱克斯刘

#课程内容:

如何为组件添加 CSS 的 class?
传递一个字符串作为 className 属性:
	render() {
	  return <span className="menu navigation-menu">Menu</span>
	}
	CSS 的 class 依赖组件的 props 或 state 的情况很常见:

	render() {
	  let className = 'menu';
	  if (this.props.isActive) {
    className += ' menu-active';
	  }
	  return <span className={className}>Menu</span>
	}
style(行内样式 inline-style) 规范
注意

在文档中,部分例子为了方便,直接使用了 style,但是通常不推荐将 style 属性作为设置元素样式的主要方式。在多数情况下,应使用 className 属性来引用外部 CSS 样式表中定义的 class。style 在 React 应用中多用于在渲染过程中添加动态计算的样式。另请参阅:FAQ:Styling 和 CSS。
style 接受一个采用小驼峰命名属性的 JavaScript 对象,而不是 CSS 字符串。这与 DOM 中 style 的 JavaScript 属性是一致的,同时会更高效的,且能预防跨站脚本(XSS)的安全漏洞。例如:

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}
注意:样式不会自动补齐前缀。如需支持旧版浏览器,请手动补充对应的样式属性:

const divStyle = {
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

function ComponentWithTransition() {
  return <div style={divStyle}>This should work cross-browser</div>;
}
Style 中的 key 采用小驼峰命名是为了与 JS 访问 DOM 节点的属性保持一致(例如:		node.style.backgroundImage )。浏览器引擎前缀都应以大写字母开头,除了 ms。因此,WebkitTransition 首字母为 ”W”。

React 会自动添加 ”px” 后缀到内联样式为数字的属性后。如需使用 ”px” 以外的单位,请将此值设为数字与所需单位组成的字符串。例如:

但并非所有样式属性都转换为像素字符串。有些样式属性是没有单位的(例如 zoom,order,flex)。无单位属性的完整列表在此处。

行内样式不好吗?
从性能角度来说,CSS 的 class 通常比行内样式更好。
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP