预计阅读时间: 5 分钟
–React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。
要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名 var myDivElement =
;React.render(myDivElement, document.body);
要渲染 React 组件,只需创建一个大写字母开头的本地变量。 var MyComponent = React.createClass({/*...*/});var myElement = ;React.render(myElement, document.body);
转换
JSX 把类 XML 的语法转成纯粹 JavaScript var Nav;// 输入 (JSX):var app = ;//输出 (JS):var app = React.createElement(Nav, {color:"blue"});//注意,要想使用 ,Nav 变量一定要在作用区间内。
JSX 也支持使用 XML 语法定义子结点 var Nav, Profile;// 输入 (JSX):var app = click;//输出 (JS):var app = React.createElement(Nav,{color:"blue"},React.createElement(Profile, null, "click"));
JavaScript 表达式
属性表达式要使用 JavaScript 表达式作为属性值, 只需把这个表达式用一对大括号 ({}) 包起来,不要用引号 ("")。 // 输入 (JSX):var person = ;//输出 (JS):var person = React.createElement(Person,{name: window.isLoggedIn ? window.name : ''});
子节点表达式 // 输入 (JSX):var content = {window.isLoggedIn ? : };//输出 (JS):var content = React.createElement(Container,null,window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login));
注释你只需要在一个标签的子节点内(非最外层)小心地用 {} 包围要注释的部分。 var content = ({/* 一般注释, 用 {} 包围 */});
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网