xyhthink

在 React 中,所有的 DOM 特性和属性(包括事件处理)都应该是小驼峰命名的方式。例如,与 HTML 中的 tabindex 属性对应的 React 的属性是 tabIndex。例外的情况是 aria-* 以及 data-* 属性,一律使用小写字母命名。比如, 你依然可以用 aria-label 作为 aria-label

属性差异

checked

<input> 组件的 type 类型为 checkboxradio 时,组件支持 checked 属性。你可以使用它来设置组件是否被选中。这对于构建受控组件(controlled components)很有帮助。而 defaultChecked 则是非受控组件的属性,用于设置组件首次挂载时是否被选中。

className

className 属性用于指定 CSS 的 class,此特性适用于所有常规 DOM 节点和 SVG 元素,如 <div><a> 及其它标签。

dangerouslySetInnerHTML

dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 innerHTML 的替换方案。通常来讲,使用代码直接设置 HTML 存在风险,因为很容易无意中使用户暴露于跨站脚本(XSS)的攻击。因此,你可以直接在 React 中设置 HTML,但当你想设置 dangerouslySetInnerHTML 时,需要向其传递包含 key 为 __html 的对象,以此来警示你。

1
2
3
4
5
6
7
function createMarkup() {
return {__html: 'First &middot; Second'};
}

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

htmlFor

由于 for 在 JavaScript 中是保留字,所以 React 元素中使用了 htmlFor 来代替。

onChange

onChange 事件与预期行为一致:每当表单字段变化时,该事件都会被触发。我们故意没有使用浏览器已有的默认行为,是因为 onChange 在浏览器中的行为和名称不对应,并且 React 依靠了该事件实时处理用户输入。

selected

<option> 组件支持 selected 属性。你可以使用该属性设置组件是否被选择。这对构建受控组件很有帮助。

style

在文档中,部分例子为了方便,直接使用了 style,但是通常不推荐将 style 属性作为设置元素样式的主要方式。在多数情况下,应使用 className 属性来引用外部 CSS 样式表中定义的 class。style 在 React 应用中多用于在渲染过程中添加动态计算的样式。

style 接受一个采用小驼峰命名属性的 JavaScript 对象,而不是 CSS 字符串。这与 DOM 中 style 的 JavaScript 属性是一致的,同时会更高效的,且能预防跨站脚本(XSS)的安全漏洞。例如:

1
2
3
4
5
6
7
8
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
};

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

Style 中的 key 采用小驼峰命名是为了与 JS 访问 DOM 节点的属性保持一致(例如:node.style.backgroundImage )。浏览器引擎前缀都应以大写字母开头,除了 ms。因此,WebkitTransition 首字母为 ”W”。

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

1
2
3
4
5
6
7
8
9
// Result style: '10px'
<div style={{ height: 10 }}>
Hello World!
</div>

// Result style: '10%'
<div style={{ height: '10%' }}>
Hello World!
</div>

suppressContentEditableWarning

通常,当拥有子节点的元素被标记为 contentEditable 时,React 会发出一个警告,因为这不会生效。该属性将禁止此警告。尽量不要使用该属性,除非你要构建一个类似 Draft.js 的手动管理 contentEditable 属性的库。

value

<input><textarea> 组件支持 value 属性。你可以使用它为组件设置 value。这对于构建受控组件是非常有帮助。defaultValue 属性对应的是非受控组件的属性,用于设置组件第一次挂载时的 value。

 评论


Power by Yuhangxie , 总访问量为 次 。
载入天数...载入时分秒...
京ICP备19024986号