0
点赞
收藏
分享

微信扫一扫

JSX 基本语法

三次方 2021-09-28 阅读 111
技术

1、XML 基本语法
使用类 XML 语法的好处是标签可以任意嵌套,我们可以像 HTML 一样清晰地看到 DOM 树状结构及其属性。

const List = () => ( 
 <div> 
 <Title>This is title</Title> 
 <ul> 
 <li>list item</li> 
 <li>list item</li> 
 <li>list item</li> 
 </ul> 
 </div> 
);
  • 定义标签时,只允许被一个标签包裹;例如,const component = <span>name</span><span>value</span> 这样写会报错
  • 标签一定要闭合

2、元素类型

  • DOM 元素 (小写首字母对应 DOM 元素)
  • 组件元素(组件元素对应大写首字母)
const Title = (children) => ( 
 <h3>{children}</h3> 
);

通过命名空间的方式使用组件元素
const App = () => (
<MUI.RaisedButton label="Default" />
);
3、注释
{/* 节点注释 */}

4、元素属性
不论是 DOM 元素还是组件元素,它们都有属性。
不同的是,DOM 元素的属性是标准规范属性,但有两个例外——class 和 for,这是因为在JavaScript 中这两个单词都是关键词。
因此:

  • class 属性改为 className;
  • for 属性改为 htmlFor。

Boolean 属性
省略 Boolean 属性值会导致 JSX 认为 bool 值设为了 true;比如 disabled、required、checked 和 readOnly 等。<Checkbox checked={true} /> 可以简写为 <Checkbox checked />

举报

相关推荐

0 条评论