频道导航

前端框架React - JSX(一)

2020-06-08 React 前端之家

前端之家收集整理的这篇文章主要介绍了前端框架React - JSX(一)，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

JSX produces React "elements".
JSX用于产生React元素。

@H_404_13@

You can embed anyJavaScript expressionin JSX by wrapping it in curly braces.
可以在花括号里面嵌入js表达式。

@H_404_13@

2.HTML 标签和 React 组件

在JSX语法中，遇到HTML标签（以<开头）就用HTML规则解析，遇到代码块（以{开头）就用JavaScript规则解析。React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名。
```
js 代码:
    
    
     
     var myDivElement = <div className="foo"/>;
     
     React.render(myDivElement, documentbody);
    
    
```
要渲染 React 模块，只需创建一个大写字母开头的本地变量。
```
 MyComponentcreateClass({/*...*/});
```

myElement < someProperty={true}/>;

myElement React 的 JSX 里约定分别使用首字母大、小写来区分本地模块的类和 HTML 标签。

注意，react声明组件时，第一个字母必须大写。

当JSX包含多行代码时，将它们包含在小括号中。

@H_404_13@

const user = {
  firstName: 'Oscar',lastName: 'Liu'
};

这段代码是定义一个对象变量。

@H_404_13@

const element = (
  <h1>
    Hello,{formatName(user)}!
  </h1>
);

当JSX包含多行代码时，将它们包含在小括号中。在JSX语法中，遇到HTML标签（以<开头）就用HTML规则解析，遇到代码块（以{开头）就用JavaScript规则解析。！！！！！！！！！！！！！！！！！

@H_404_13@ We split JSX over multiple lines for readability. While it isn't required,when doing this,we also recommend wrapping it in parentheses to avoid the pitfalls ofautomatic semicolon insertion.

@H_404_13@ 即使只有一行JSX代码，我们仍然建议将JSX代码包裹在小括号里面。

@H_404_13@
@H_404_13@

After compilation,JSX expressions become regular JavaScript objects.

This means that you can use JSX inside ofifstatements andforloops,assign it to variables,accept it as arguments,and return it from functions:
编译完，JSX表达式变成了普通的JS对象。
这个就是说你可以在if和for循环里面使用JSX，也可以把JSX分配给变量，接受JSX作为参数，在function里面return JSX。

@H_404_13@
@H_404_13@

用JSX指定属性

@H_404_13@ You may also use curly braces to embed a JavaScript expression in an attribute
@H_404_13@ 用花括号括起表达式作为属性的值，这种做法就是用JSX指定属性。 @H_404_13@ const element =<imgsrc={user.avatarUrl}></img>;
@H_404_13@
@H_404_13@ You should either use quotes (for string values) or curly braces (for expressions),but not both in the same attribute.
@H_404_13@ 不要同时在一个属性里面使用“”和花括号，就是不要混用。 @H_404_13@
@H_404_13@
@H_404_13@
用JSX指定Children

If a tag is empty,you may close it immediately with/>

如果一个tag是空，你可以用/>立刻close它。

JSX tags may contain children

JSX标签有可能包含Children
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);
Since JSX is closer to JavaScript than HTML,React DOM usescamelCaseproperty naming convention instead of HTML attribute names.

For example,classbecomesclassNamein JSX,andtabindexbecomestabIndex.