- JSX produces React "elements".
- JSX用于产生React元素。
- You can embed anyJavaScript expressionin JSX by wrapping it in curly braces.
- 可以在花括号里面嵌入js表达式。
-
2.HTML 标签 和 React 组件
在JSX语法中,遇到HTML标签(以<开头)就用HTML规则解析,遇到代码块(以{开头)就用JavaScript规则解析。React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。
要渲染 React 模块,只需创建一个大写字母开头的本地变量。
MyComponentcreateClass({/*...*/});
- myElement < someProperty={true}/>;
- myElement React 的 JSX 里约定分别使用首字母大、小写来区分本地模块的类和 HTML 标签。
-
注意,react声明组件时,第一个字母必须大写。
当JSX包含多行代码时,将它们包含在小括号中。
-
const user = { firstName: 'Oscar',lastName: 'Liu' };
这段代码是定义一个对象变量。 -
-
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.
-
After compilation,JSX expressions become regular JavaScript objects.
This means that you can use JSX inside of
编译完,JSX表达式变成了普通的JS对象。if
statements andfor
loops,assign it to variables,accept it as arguments,and return it from functions: - 这个就是说你可以在if和for循环里面使用JSX,也可以把JSX分配给变量,接受JSX作为参数,在function里面return JSX。
- 用JSX指定属性
You may also use curly braces to embed a JavaScript expression in an attribute
const element =<imgsrc={user.avatarUrl}></img>;
You should either use quotes (for string values) or curly braces (for expressions),but not both in the same attribute.
不要同时在一个属性里面使用“”和花括号,就是不要混用。
- 用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 uses
camelCase
property naming convention instead of HTML attribute names.For example,
class
becomesclassName
in JSX,andtabindex
becomestabIndex.
原文链接:https://www.f2er.com/react/304478.html
React DOM中像html属性名字我们用驼峰原则来命名。