NO.1 ReactDom.render
ReactDom.render是React最基本的用法溜畅,用于將模板轉(zhuǎn)化為HTML語言寒屯,并插入指定的DOM節(jié)點弯囊。
ReactDom.render(
<Name />,
document.getElementById('app')
);
上面代碼的含義是將Name這個組件插入ID為app的元素中赵颅。
NO.2 JSX語法
將HTML語言直接寫入帶JS語言之中氢拥,這就是JSX語法
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
JSX的語法規(guī)則是如果遇到HTML的標(biāo)簽蚌铜,就用HTML的規(guī)則解析,如果遇到代碼塊嫩海,就用JS的規(guī)則解析冬殃。
JSX允許直接在模板中插入JS變量,如果變量是一個數(shù)組叁怪,則會展開這個數(shù)組的所有成員查看
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
NO.3 組件(component)
新建一個name.js,把他封裝成為一個組件审葬,內(nèi)容如下:
'use strict';
import React from "react";
class Name extends React.Component {
render () {
return (
<div>
hello~
</div>
);
}
}
export { Name as default };
Name就是一個組件類,模板插入<Name />
奕谭,會自動生成Name的一個實例涣觉,有三點必須注意:
1.所有組件中必須有自己的render方法,用于輸出組件展箱;
2.組件類的第一個字母必須大寫旨枯,否則會報錯;
3.組件只能包含一個頂層標(biāo)簽混驰,否則會報錯攀隔;例如皂贩,如果將return里面的內(nèi)容改成:
return (
<div>
hello~
</div>
<div>
youngi~
</div>
);
然后webpack會返回報錯信息:
Adjacent JSX elements must be wrapped in an enclosing tag (11:4)
組件的用法和原生的HTML的用法一致,可以加入任意屬性昆汹,比如<Name name="youngi"/>
明刷,有一點值得注意的是,class和for這兩個屬性應(yīng)該寫為className和htmlFor
ReactDom.render(
<Name name="youngi" />,
document.getElementById('app')
);
那么在組件中满粗,想要獲取這個屬性就可以用this.props.name讀缺材:
class Name extends React.Component {
render () {
return (
<div>
hello~<div>{this.props.name}</div>
</div>
);
}
}
NO.4 this.props.children
這個是個特例,這個代表的意思不是去找this.props的children屬性映皆,而是去找這個組件的所有子節(jié)點
這里需要注意挤聘, this.props.children 的值有三種可能:如果當(dāng)前組件沒有子節(jié)點,它就是 undefined ;如果有一個子節(jié)點捅彻,數(shù)據(jù)類型是 object 组去;如果有多個子節(jié)點,數(shù)據(jù)類型就是 array 步淹。所以从隆,處理 this.props.children 的時候要小心。
React 提供一個工具方法 React.Children 來處理 this.props.children 缭裆。我們可以用 React.Children.map 來遍歷子節(jié)點键闺,而不用擔(dān)心 this.props.children 的數(shù)據(jù)類型是 undefined 還是 object。
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
NO.5 PropTypes
這個屬性是組件類的屬性澈驼,而不是組件的屬性辛燥,這個PropTypes可以用來驗證從組件傳來的屬性是否合法。例如:
import React from 'react';
import ReactDom from 'react-dom';
import Name from './name';
var name = 123
ReactDom.render(
<Name name= {name} />,
document.getElementById('app')
);
如上代碼顯示盅藻,Name組件的name屬性的類型為number類型购桑,而不是字符串畅铭,那么在組件類中氏淑,對這個屬性進(jìn)行驗證:
class Name extends React.Component {
render () {
return (
<div>
hello~<div>{this.props.name}</div>
</div>
);
}
}
Name.propTypes = { name: React.PropTypes.string.isRequired };
進(jìn)行驗證后,驗證不通過的話硕噩,會在控制臺上報錯
Invalid prop `name` of type `number` supplied to `Name`, expected `string`.
NO.6 defaultProps 設(shè)置組件的默認(rèn)值
class Name extends React.Component {
render () {
return (
<div>
hello~<div>{this.props.name}</div>
</div>
);
}
}
Name.defaultProps = { name: "youngi" };