码迷,mamicode.com
首页 > Web开发 > 详细

react的jsx语法

时间:2019-01-29 12:50:11      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:highlight   参数   loader   ast   tin   name   span   form   script   

在webpack.config.js中配置解析的loader

{
     test:/\.jsx?$/,
     use:{
          loader:"babel-loader",
          options:{
                 presets:["@babel/env","@babel/react"]
                 }
         }
},

  

jsx对象就是js对象!只不过jsx需要事先编译,才转为js对象!
在默认情况下,React DOM会将所有嵌入JSX的值进行编码。这样可以有效避免xss攻击。
sx有个强大的地方就是可以在js中嵌入标签,如在数组中嵌入div标签
let array=[]
array.push(<div>aaaa<div>bbbbbb</div></div>)

  

注意:
(1)一次push父标签只能是一个,不能push(<div></div><div></div>),跟render 里的 return 一样。
(2)在js文件这样写会报错,在jsx中写是不会的。
例子:
function formatName(user) {
  //将参数合并成一个srting
  return user.firstName + ‘ ‘ + user.lastName;
}

//创建user对象
const user = {
  firstName: ‘Harper‘,
  lastName: ‘Perez‘
};

//创建element对象,并用JSX语法标识为一个html内容。
//h1标签中会包含方法计算之后的内容
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById(‘root‘)
);

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

ReactDOM.render( element, document.getElementById(‘root‘) );

 

react的jsx语法

标签:highlight   参数   loader   ast   tin   name   span   form   script   

原文地址:https://www.cnblogs.com/wyryuebanwan/p/10333481.html

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