React JSX语法

  • Z时代
  • 2024-01-10
  • 分类：综合

react

const element = <h1>Hello, world!</h1>;
它被称为 JSX， 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。
JSX 是在 JavaScript 内部实现的。
我们知道元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。
与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。
要将 React 元素渲染到根 DOM 节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：
在React中使用jsx语法进行渲染，
使用jsx来代替常规的JavaScript，
eg：
//样式
var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
//HTML也可以这样写
var arr = [
  <h1>菜鸟教程</h1>,
  <h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
    <div>
        <span>{1+1}</span>
        <div>{arr}</div>
        {/*注释需要写在花括号内*/}
        <h1 style={myStyle}> i==1 ? 'heson' : 'haizhen' </h1>
    <div/>
    ,
    document.getElementById('example')
)

以上是 React JSX语法 的全部内容， 来源链接： utcz.com/z/382824.html

回到顶部