3 JSX语法

const element = <h1>Hello, world!</h1>;

这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。它被称为 JSX， 一种 JavaScript 的语法扩展。元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。

注意:

由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 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')
);

 

标签：render,语法,getElementById,document,JSX,example,ReactDOM
来源： https://www.cnblogs.com/liufei1983/p/14500862.html