React学习之高级DOM元素属性(二十六)

前端之家收集整理的这篇文章主要介绍了React学习之高级DOM元素属性(二十六)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

@H_301_1@checked

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

@H_301_1@className

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

@H_301_1@dangerouslySetInnerHTML

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

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

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

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

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

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

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

@H_301_1@htmlFor

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

@H_301_1@onChange

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

@H_301_1@selected

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

@H_301_1@style

这个属性在@H_301_1@React中接受一个@H_301_1@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>;
}

@H_301_1@suppressContentEditableWarning

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

@H_301_1@value

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

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

这些没有特殊化的属性都必须要通过@H_301_1@data-*和@H_301_1@aria-*来加入@H_301_1@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 crossOrigin
data dateTime default defer dir disabled download draggable 
encType
form formAction formEncType formMethod formNoValidate formTarget
frameBorder
headers height hidden high href hrefLang htmlFor httpEquiv
icon id inputMode integrity is
keyParams keyType kind
label lang list loop low
manifest marginHeight marginWidth max maxLength media mediaGroup method min minLength multiple muted name noValidate nonce open optimum pattern placeholder poster preload profile radioGroup readOnly rel required reversed role rowSpan rows sandBox scope scoped scrolling seamless selected shape size sizes span spellCheck src srcDoc srcLang srcSet start step style summary tabIndex target title type useMap value width wmode wrap

其中针对@H_301_1@RDFa标准的处理,如下

about datatype inlist prefix property resource typeof vocab

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

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

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

accentHeight accumulate additive alignmentBaseline allowReorder alphabetic
amplitude arabicForm ascent attributeName attributeType autoReverse azimuth
baseFrequency baseProfile baselineShift bBox begin bias by calcMode capHeight
clip clipPath clipPathUnits clipRule colorInterpolation
colorInterpolationFilters colorProfile colorRendering contentScriptType
contentStyleType cursor cx cy d decelerate descent diffuseConstant direction
display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground
end exponent externalResourcesrequired fill fillOpacity fillRule filter
filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize
fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy
g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef
gradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic
imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength
kerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor
limitingConeAngle local markerEnd markerHeight markerMid markerStart
markerUnits markerWidth mask maskContentUnits maskUnits mathematical mode
numOctaves offset opacity operator order orient orientation origin overflow
overlinePosition overlineThickness paintOrder panose1 pathLength
patternContentUnits patternTransform patternUnits pointerEvents points
pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits
r radius refX refY renderingIntent repeatCount repeatDur requiredExtensions
requiredFeatures restart result rotate rx ry scale seed shapeRendering slope
spacing specularConstant specularExponent speed spreadMethod startOffset
stdDeviation stemh stemv stitchTiles stopColor stopOpacity
strikethroughPosition strikethroughThickness string stroke strokeDasharray
strokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity
strokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor
textDecoration textLength textRendering to transform u1 u2 underlinePosition
underlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic
vHanging vIdeographic vMathematical values vectorEffect version vertAdvY
vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing
writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole
xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase
xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan

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

猜你在找的React相关文章