标签：render 语法 getElementById document JSX example ReactDOM

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。