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 &middot; 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属性被支持

巴特西

204-React DOM 元素

最新文章

热门文章