React

React JSX常用

联系站长 作者:web知道 来源:未知 2019-06-11 10:36 我要评论

React JSX常用...

JSX 基本使用
const element = <h1>Hello, world!</h1>;这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。
它被称为 JSX, 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。
JSX 嵌套元素
注意:只能包含一个根节点
 
ReactDOM.render(
    // 模板只能包含一个根节点
  <div>
    <h1>hello</h1>
    <h2>jack</h2>
  </div>,
    document.getElementById('root')
);

JSX 表达式
import React from 'react';
import ReactDom from 'react-dom';
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
const user = {
  firstName: '张',
  lastName: '三'
};
let num = 2
ReactDom.render(
  // 表达式只能放在大括号中,注意和vue一样,同样不支持if else语句
  // 如果里面放对象,会报错:Objects are not valid as a React child
  <div>
    <p>{ 1 + 1}</p>
    <p>{ '李' + '宁' }</p>
    <h1>hello {formatName(user)}</h1>
    <p>{num % 2 === 0 ? '偶数' : '奇数'}</p>
  </div>,
  document.getElementById('root')
)

JSX注释
    {
      // 这里是单行注释
    }
    {
      /*
      这里是多行注释
      这里是多行注释
      这里是多行注释
      这里是多行注释
      */
    }

JSX属性
因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称,而不是使用 HTML 的属性名称
html的class属性改为className
html中label标签的for属性改为htmlFor
标签中的自定义属性使用data-开头 查看详情
 
import React from 'react';
import ReactDom from 'react-dom';
const user = {
  avatar: './avatar.jpg'
}
ReactDom.render(
  <div>
    <h1>hello</h1>
    <h2>jack</h2>
    <img src={user.avatar}></img>
    {
      // class ==> className
      // for ==> htmlFor
      // tabindex ==> tabIndex
      // 自定义属性需要以data-开头,规范
    }
    <p className="myStyle">类名</p>
    <label htmlFor="male">Male</label>
    <input type="radio" name="sex" id="male" />
    <a href="http://www.google.com/" tabIndex="2">百度</a>
    <a href="http://www.google.com/" tabIndex="1">Google</a>
    <p data-mytest="123">自定义属性</p>
  </div>,
  document.getElementById('root')
)

JSX样式
import React from 'react';
import ReactDom from 'react-dom';
let myStyle = {
  // React会自动在数值后面加上px
  fontSize: 100,
  color: '#FF0000'
}
ReactDom.render(
  <div>
    <h1>hello</h1>
    <h2 style={myStyle}>jack</h2>
  </div>,
  document.getElementById('root')
)
 




本文如有侵犯版权请联系站长删除。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
精彩导读