ReactJSX内置表达式

Posted 2021-01-09 yulingjia

（一）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>