XML 基本语法
定义标签时,只允许被一个标签包裹。标签一定要闭合
元素类型
DOM 元素和组件元素。React中的我们的重点是组件,对应规则是 HTML 标签首字母是否为小写字母,其中小写首字母对应 DOM 元素,而组件元素自然对应大写首字母。
JSX 还可以通过命名空间的方式使用组件元素,以解决组件相同名称冲突的问题,或是对一组组件进行归类。其实就好像不同对象中的同名方法一个道理。
注释
在 HTML 中,注释写成 <!-- content --> 这样的形式,但在 JSX 中并没有定义注释的转换方法,所以这种方式不能使用了。事实上,JSX 还是 JavaScript,依然可以用简单的方法使用注释,唯一要注意的是,在一个组件的子元素位置使用注释要用{}包起来。
function Welcome(props) {
return <button className="btn btn-blue">
/*Test comment*/
<em>{props.name}</em>
</button>
}
我们需要更改如下:
function Welcome(props) {
return <button className="btn btn-blue">
{/*Test comment*/}
<em /*Test comment */>{props.name}</em>
</button>
}
在标签中注释仍然可以使用/**/,例如em元素中的注释
这里在去扩展到条件注释,判断浏览器版本的数注释,就不能像以前那样使用。
<!--[if IE]>
<p>Work in IE browser</p>
<![endif]-->
这样的话使用 JavaScript 判断浏览器版本来替代:
{
(!!window.ActiveXObject || 'ActiveXObject' in window) ?
<p>Work in IE browser</p> : ''
}
元素属性
在 JSX 中,不论是 DOM 元素还是组件元素,它们都有属性。
DOM 元素的属性是标准规范属性,但有两个例外—— class 和 for ,这是因为在 JavaScript 中这两个单词都是关键词。因此,我们这么转换:
- class 属性改为 className
- for 属性改为 htmlFor
<div className='class'>
<label htmlFor='name'></label>
</div>
渲染如下:
组件元素中的属性则是自定义的属性,用于传入的props中的属性。
const Header = (props) => (
<h3 title={props.title}>{props.text}</h3>
);
class App extends Component {
render() {
return (
<Header title="Sara" text="hello!"/>
);
}
}
也可以如下:
const Header = ({title, text}) => (
<h3 title={title}>{text}</h3>
);
class App extends Component {
render() {
return (
<Header title="Sara" text="hello!"/>
);
}
}
Boolean属性
省略 Boolean 属性值会导致 JSX 认为 bool 值设为了 true 。要传 false 时,必须使用属性表达式。这常用于表单元素中,比如 disabled 、 required 、 checked 和 readOnly 等。例如, <Checkbox checked={true} /> 可以简写为 <Checkbox checked /> ,反之 <Checkbox checked={false} /> 就可以省略 checked 属性。
class Checkbox extends Component {
render() {
return (
<input type="checkbox" checked={this.props.checked}/>
);
}
}
Checkbox.propTypes = {
checked: PropTypes.bool
}
class App extends Component {
render() {
return (
<Checkbox checked/>
);
}
}
如图,默认值为true
展开属性
const data = { name: 'foo', value: 'bar' };
const component = <Component name={data.name} value={data.value} />;
可以写成
const data = { name: 'foo', value: 'bar' };
const component = <Component {...data} />;
我们可以使用如下将当前组建的属性传入到子组件中去。
const component = <Component {...props} />;
自定义 HTML
如果在 JSX 中往 DOM 元素中传入自定义属性,React 是不会渲染的:
<div d="xxx">content</div>
如果要使用 HTML 自定义属性,要使用 data- 前缀,这与 HTML 标准也是一致的:
<div data-attr="xxx">content</div>
然而,在自定义标签中任意的属性都是被支持的:
<x-my-component custom-attr="foo" />
以 aria- 开头的网络无障碍属性同样可以正常使用:
<div aria-hidden={true}></div>
<input data-customerproperty1="proprtty1" property2='property2' aria-property3="property3" type="checkbox" checked={this.props.checked}/>
Javascript属性表达式
属性值要使用表达式,只要用 {} 替换 "" 即可:
// 输入(JSX):
const person = <Person name={window.isLoggedIn ? window.name : ''} />;
// 输出(JavaScript):
const person = React.createElement(
Person,
{name: window.isLoggedIn ? window.name : ''}
);