3 JSX语法


const
element = <h1>Hello, world!</h1>;
这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。它被称为 JSX, 一种 JavaScript 的语法扩展。元素是构成 React 应用的最小单位,JSX 就是用来声明 React 当中的元素。
注意:

由于 JSX 就是 JavaScript,一些标识符像 classfor 不建议作为 XML 属性名。作为替代,React DOM 使用 className 和 htmlFor 来做对应的属性。

使用 JSX:

  JSX 看起来类似 HTML :

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

可以在以上代码中嵌套多个 HTML 标签,需要使用一个 div 元素包裹它,

实例中的 p 元素添加了自定义属性 data-myattribute,添加自定义属性需要使用 data- 前缀

ReactDOM.render(
    <div>
      <h1>菜鸟教程</h1>
      <h2>欢迎学习 React</h2>
      <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
    ,
    document.getElementById('example')
);

JavaScript 表达式

ReactDOM.render(
    <div>
      <h1>{1+1}</h1>
    </div>
    ,
    document.getElementById('example')
);

注释:

注释需要写在花括号中:

ReactDOM.render(
    <div>
    <h1>菜鸟教程</h1>
    {/*注释...*/}
     </div>,
    document.getElementById('example')
);

数组:

JSX 允许在模板中插入数组,数组会自动展开所有成员:

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

 

posted @ 2021-03-08 17:24  刘大飞  阅读(93)  评论(0编辑  收藏  举报