react的jsx语法

Posted 2021-02-06 YR

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