react的jsx语法

发布时间：2020-12-15 20:35:14 所属栏目：百科来源：网络整理

导读：在webpack.config.js中配置解析的loader { test:/.jsx?$/,use:{ loader:"babel-loader",options:{ presets:["@babel/env","@babel/react"] } }}, jsx对象就是js对象！只不过jsx需要事先编译，才转为js对象！在默认情况下，React DOM会将所有嵌入JSX的值进

在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‘) );

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!