码迷,mamicode.com
首页 > 其他好文 > 详细

react语法

时间:2021-06-23 16:46:19      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:表达式   span   react   color   world   asc   菜鸟   class   font   

react语法

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

JavaScript 表达式

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

使用 JSX

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

样式

var myStyle = {
    fontSize: 100,
    color: ‘#FF0000‘
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鸟教程</h1>,
    document.getElementById(‘example‘)
);

注释

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

数组

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

react语法

标签:表达式   span   react   color   world   asc   菜鸟   class   font   

原文地址:https://www.cnblogs.com/hu308830232/p/14920927.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!