React学习之高级DOM元素属性（二十六）

React实现了一个独立于浏览器的DOM系统，跨浏览器兼容性特别好。

在React中， 所有的DOM属性包括事件绑定都要使用托蜂命名法，比如tabindex在React中就变成了tabIndex，同时需要显示在DOM的属性需要用这两个前缀而且必须是小写，aria-*和data-*

1.一些特殊的DOM属性在React中的处理

checked

这个属性用在checkbox和radio中，可以使用它检测组件是不是被选择，defaultChecked设置可以让组件默认被选择

className

除了是WEB组件外都应该使用className,WEB组件则直接使用class

dangerouslySetInnerHTML

这个是React用来代替浏览器中DOM操作innerHTML的，一般来说，直接设置HTML代码是有风险的，可能会造成XSS攻击，在前面我们说JSX中插入表达式时也说过，{}默认会对内部的变量进行编码，防止发生XSS攻击。

但是，你可以通过React直接输出HTML，但是你需要做一些处理，分为如下两个步骤。

1. 先创建一个对象，这个对象有一个__html的key键来处理需要输出的HTML数据

2. 然后通过dangerouslySetInnerHTML对这个数据进行输出就可以了。

function createMarkup() {  return {__html: 'First &middot; Second'};}function MyComponent() {  return <div dangerouslySetInnerHTML={createMarkup()} />;}

虽然是这样的，但是有一点需要记住的就是，这样做是危险的，XSS攻击无处不在啊。

htmlFor

由于for是javascript的保留字，所以React使用htmlFor来代替它，你可能有点困惑这个东西哪里用，在表单的label中的for属性用来绑定表单元素。

onChange

被React独立出来，总的来说React用它来实时响应用户的输入

selected

这个属性被使用在option组件上

style

这个属性在React中接受一个javascript对象，同时属性的名称要是用驼峰命名法

const divStyle = {  color: 'blue',  backgroundImage: 'url(' + imgUrl + ')',};function HelloWorldComponent() {  return <div style={divStyle}>Hello World!</div>;}

兼容性问题处理

const divStyle = {  WebkitTransition: 'all', // webkit浏览器  msTransition: 'all' // ms IE浏览器，注意是小写};function ComponentWithTransition() {  return <div style={divStyle}>This should work cross-browser</div>;}

suppressContentEditableWarning

看到这个属性名字大家或许就已经够明白了，这是针对contentEditable处理的，在React中，如果一个元素有子节点，而它自己又标记了contentEditable的话就会报警告，因为它并不会工作。（然而这个属性个人测试并没有什么卵用）

value

这个属性放在input和textarea组件，可以使用它为组件设置值，defaultValue用于设置默认值

2.在React中更没有被特殊化的属性

这些没有特殊化的属性都必须要通过data-*和aria-*来加入JSXDOM语句中

accept acceptCharset accessKey action allowFullScreen allowTransparency alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked cite classID className colSpan cols content contentEditable contextMenu controls coords crossOrigindata dateTime default defer dir disabled download draggable encTypeform formAction formEncType formMethod formNoValidate formTargetframeBorderheaders height hidden high href hrefLang htmlFor httpEquivicon id inputMode integrity iskeyParams keyType kindlabel lang list loop lowmanifest marginHeight marginWidth max maxLength media mediaGroup method min minLength multiple muted namenoValidate nonceopen optimumpattern placeholder poster preload profileradioGroup readOnly rel required reversed role rowSpan rows sandbox scope scoped scrolling seamless selected shape size sizes span spellCheck src srcDoc srcLang srcSet start stepstyle summarytabIndex target title typeuseMapvaluewidth wmode wrap

其中针对RDFa标准的处理，如下

about datatype inlist prefix property resource typeof vocab

除此之外还有几个非标准的属性

autoCapitalize autoCorrect//用于Safari<link rel="mask-icon" />中的color属性//在SafariitemProp itemScope itemType itemRef itemID//HTML的微数据security//古老的IEunselectable//IEresults autoSave//webkit/blink对于search额外的支持

3.React支持并且没有特殊化的SVG属性

accentHeight accumulate additive alignmentBaseline allowReorder alphabeticamplitude arabicForm ascent attributeName attributeType autoReverse azimuthbaseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeightclip clipPath clipPathUnits clipRule colorInterpolationcolorInterpolationFilters colorProfile colorRendering contentScriptTypecontentStyleType cursor cx cy d decelerate descent diffuseConstant directiondisplay divisor dominantBaseline dur dx dy edgeMode elevation enableBackgroundend exponent externalResourcesRequired fill fillOpacity fillRule filterfilterRes filterUnits floodColor floodOpacity focusable fontFamily fontSizefontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fyg1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRefgradientTransform gradientUnits hanging horizAdvX horizOriginX ideographicimageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLengthkerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColorlimitingConeAngle local markerEnd markerHeight markerMid markerStartmarkerUnits markerWidth mask maskContentUnits maskUnits mathematical modenumOctaves offset opacity operator order orient orientation origin overflowoverlinePosition overlineThickness paintOrder panose1 pathLengthpatternContentUnits patternTransform patternUnits pointerEvents pointspointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnitsr radius refX refY renderingIntent repeatCount repeatDur requiredExtensionsrequiredFeatures restart result rotate rx ry scale seed shapeRendering slopespacing specularConstant specularExponent speed spreadMethod startOffsetstdDeviation stemh stemv stitchTiles stopColor stopOpacitystrikethroughPosition strikethroughThickness string stroke strokeDasharraystrokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacitystrokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchortextDecoration textLength textRendering to transform u1 u2 underlinePositionunderlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabeticvHanging vIdeographic vMathematical values vectorEffect version vertAdvYvertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacingwritingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrolexlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBasexmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan

下一篇将讲React中的事件系统