204-React DOM 元素

一、概述

  为了提高性能和跨浏览器兼容性,React实现了一个独立于浏览器的DOM系统。

  在React中,所有DOM属性和属性(包括事件处理程序)都应该是camelCased的。例如,HTML属性tabindex对应于React中的属性tabIndex。例外是aria- *和data- *属性,它们应该是小写的。例如,您可以将aria标签保留为aria标签。

二、属性差异

React和HTML之间有许多不同的属性:

2.1、checked(defaultChecked)

2.2、className【原class】

2.3、dangerouslySetInnerHTML

  dangerouslySetInnerHTML是React在浏览器DOM中使用innerHTML的替代品。一般来说,从代码中设置HTML是有风险的,因为很容易让您的用户无意中发现跨站脚本攻击(XSS)。 因此,您可以直接从React中设置HTML,但必须输入危险的SetInnerHTML并使用__html键传递对象,以提醒自己危险。例如:

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

2.4、htmlFor【for】

2.5、onChange、selected,value(defaultValue)

2.6、style

  在大多数情况下,应该使用className来引用外部CSS样式表中定义的类。style在React应用程序中最常用于在呈现时添加动态计算的样式。

  style属性接受一个带有camelCased属性的JavaScript对象,而不是一个CSS字符串。这与DOM风格的JavaScript属性一致,效率更高,并且可以防止XSS安全漏洞。例如:

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

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

2.7、所有的Html属性被支持

 

 

 

 

 

 

posted @ 2018-06-24 20:20  bjlhx15  阅读(241)  评论(0编辑  收藏  举报
Copyright ©2011~2020 JD-李宏旭