- 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 里使用小写字母开头的标签名。 js 代码:
- var myDivElement = <div className="foo"/>;
- React.render(myDivElement, documentbody);
要渲染 React 模块，只需创建一个大写字母开头的本地变量。 MyComponentcreateClass({/*...*/});
- myElement < someProperty={true}/>;
- myElement React 的 JSX 里约定分别使用首字母大、小写来区分本地模块的类和 HTML 标签。
-
注意，react声明组件时，第一个字母必须大写。 当JSX包含多行代码时，将它们包含在小括号中。
-
const user = {
firstName: 'Oscar',lastName: 'Liu'
};这段代码是定义一个对象变量。
-
-
const element = (
<h1>
Hello,{formatName(user)}!
</h1>
);
当JSX包含多行代码时，将它们包含在小括号中。在JSX语法中，遇到HTML标签（以<开头）就用HTML规则解析，遇到代码块（以{开头）就用JavaScript规则解析。！！！！！！！！！！！！！！！！！
-
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.
-
即使只有一行JSX代码，我们仍然建议将JSX代码包裹在小括号里面。
-
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。
- 用JSX指定属性
You may also use curly braces to embed a JavaScript expression in an attribute
用花括号括起表达式作为属性的值，这种做法就是用JSX指定属性。
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 usescamelCaseproperty naming convention instead of HTML attribute names. For example,classbecomesclassNamein JSX,andtabindexbecomestabIndex.
React DOM中像html属性名字我们用驼峰原则来命名。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
