react JSX react中JSX的注意点详解
蜜瓜 人气:0想了解react中JSX的注意点详解的相关内容吗,蜜瓜在本文为您仔细讲解reactJSX的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:reactJSX,JSX注意点,下面大家一起来学习吧。
1 JSX 是一个表达式
JSX 是 JavaScript 的语法扩展,本质上是 React.createElement()
方法的语法糖。
Babel 会把 JSX 转译成一个名为 React.createElement()
函数调用,所以它被看作一个表达式。
这意味着你可以在 if
语句和 for
循环的代码块中使用 JSX,将 JSX 赋值给变量,把 JSX 当作参数传入,以及从函数中返回 JSX:
function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>; }
2 JSX 的属性
2.1 驼峰命名
JSX 是 JS 的扩展,所以使用驼峰命名来定义属性的名称,而不使用HTML 属性名称的命名约定
比如:
<div className="container"></div>
上述 JSX 表达式中 class 写作 className
2.2 style 接收一个对象
style 接收一个对象,而不是字符串
比如:
let style = { width: "100px", height: "100px", background: "red" }; ReactDOM.render( <div className="box" style={style}></div>, document.querySelector("#root") );
3 JSX 标签没有子元素
如果一个标签中没有内容,可以使用/>
来闭合标签
比如:
const element = <img src={user.avatarUrl} />;
4 JSX 防止注入攻击
可以安全地在 JSX 中插入用户输入内容
React DOM 在渲染所有输入内容之前,默认会进行转义。它可以确保在你的应用中,永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS攻击。
5 唯一父元素
JSX 表达式必须有一个父元素
换句话说,下面的写法会报错
ReactDOM.render( <div className="box" style={style} /> <input type="text" />, document.querySelector("#root") );
正确的写法:
ReactDOM.render( <div> <div className="box" style={style} /> <input type="text" /> </div>, document.querySelector("#root") );
如果我们不想让父元素被渲染在页面上,可以使用React.Fragment
React.Fragment
组件能够在不额外创建 DOM 元素的情况下,让 render()
方法中返回多个元素。
render() { return ( <React.Fragment> Some text. <h2>A heading</h2> </React.Fragment> ); }
也可以使用其简写语法 <></>
,请参阅 React v16.2.0: Fragments 支持改进。
render() { return ( <> Some text. <h2>A heading</h2> </> ); }
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!
加载全部内容