React（三）JSX内置表达式

发布时间：2020-12-15 20:22:49 所属栏目：百科来源：网络整理

导读：（一）JSX是什么? React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们不需要一定使用 JSX，但它有以下优点： JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的，在编译过程中就

（一）JSX是什么?

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。

（二）使用 JSX

（1）注释写法

{/* 哈哈哈，你好 */}

　? ?

　　（2）添加自定义属性

　　　　??需要使用?data-?前缀。

<p data-myattribute = "hhhh">这是一个很不错的 JavaScript 库!</p>

（3）JSX 中不能使用?if else?语句，但是可以使用三元表达式

?表达式写在花括号?{}?中

<p className="App-intro">{userName == ‘‘ ? ‘用户没有登录‘ : ‘用户名:‘ + userName}</p>

（4）React 推荐使用内联样式。我们可以使用?camelCase?语法来设置内联样式. React 会在指定元素数字后自动添加?px?

var myStyle = {
    fontSize: 100,color: ‘#FF0000‘
};
ReactDOM.render(
    <h1 style = {myStyle}>哈哈哈</h1>,document.getElementById(‘example‘)
);

（5）属性绑定

<p><input type="button" value={userName} disabled={boolInput} /></p>

（6）JSX 允许在模板中插入数组，数组会自动展开所有成员

var arr = [
  <h1>菜鸟教程</h1>,<h2>学的不仅是技术，更是梦想！</h2>,];
ReactDOM.render(
  <div>{arr}</div>,document.getElementById(‘example‘)
);

（7）html展示

　　a：通过Unicode转码

　　b：通过?dangerouslySetInnerHTML 设置 html

　　　（此方法可能会存在 XSS 攻击）

<p dangerouslySetInnerHTML = {{__html:html}}></p>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!