React基础教程-JSX - findtp插件网

findtp插件网

您现在的位置是:首页> 前端教程 -> React基础教程-JSX

Article

React基础教程-JSX

findtp插件网2021-04-21 前端教程185
将HTML语言直接写在JavaScript语言之中,不加任何的引号,JSX语法允许HTML和JavaScript的混写。

JSX

我们可以简单的认为将HTML语言直接写在JavaScript语言之中,不加任何的引号,JSX语法允许HTML和JavaScript的混写。

var name = "findtp.com";
ReactDOM.render(
  <p>Hello, world! {name}</p>,
   document.getElementById('mydiv')
);

总结一下:遇到HTML标签,就使用HTML的规则解析;遇到代码块,使用{}包裹的代码,就用JavaScript规则进行解析。

可以把JSX看作是HTML模版,里面的变量使用{}包含。


当然JSX允许直接在模板中插入JavaScript变量,如果这个变量是一个数组的话,我们会展开这个数组的所有的成员。

 var arr = [

  <h1>Hello world!</h1>,

  <h2>React is awesome</h2>,

];

ReactDOM.render(

  <div>{arr}</div>,

  document.getElementById('example')

);

会在结果中打出Hello world!,React is awesome两个标题。


文章评论

共有0条评论来说两句吧...