React入門

時間 2019-12-11

標籤 react 入門欄目 React 简体版

原文原文鏈接

http://www.ruanyifeng.com/blog/2015/03/react.htmljavascript

ReactDOM.render 是React的最基本的方法，用於將模板轉爲HTML語言，並插入制定的DOM節點中。

<!DOCTYPE html>
<html>
<head>
<scriptsrc="../build/react.js"></script>
<scriptsrc="../build/react-dom.js"></script>
<scriptsrc="../build/browser.min.js"></script>
</head>
<body>
<divid="example"></div>
<scripttype="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>

JSX語法，html語言直接寫在 javascript代碼中，不加任何引號，支持html和js的混寫，

遇到html標籤（以 < 開頭），就以html解析，遇到代碼塊（以 { 開頭）則以JavaScript 規格解析；

<script type="text/babel">
var names =['Alice','Emily','Kate'];
ReactDOM.render(
<div>
{
names.map(function(name){
return<div>Hello,{name}!</div>
})
}
</div>,
document.getElementById('example')
);
</script>

JSX語法容許直接在模板插入 javascript變量，若是這個變量是數組，則會展開這個數組的所有成員；

<script type="text/babel">
var arr =[
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
</script>

組件

React容許將代碼封裝成組件（component），而後像插入普通HTML標籤同樣，在網頁中插入這個組件。

React.createClass 方法就是用來生成這個組件類的；

<script type="text/babel">
varHelloMessage=React.createClass({
render:function(){
return<h1>Hello{this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="John"/>,
document.getElementById('example')
);
</script>

上面代碼中，變量 HelloMessage 就是一個組件類，模板插入 <HelloMessage />變回自動建立一個這樣的實例，

全部組件類都有本身的render方法，用於輸出組件；

組件的第一個字母必須大寫，不然會報錯，另外組件類只能保安一個頂層標籤（只能有一個頂層標籤，而後包含不少子標籤），不然也會報錯。

組件的用法和原生HTML標籤徹底一致，能夠任意的加入屬性，好比 name屬性，組件的屬性能夠在組件類的this.props 對象上獲取，可是 class 屬性和for屬性在組件屬性中，名稱分別改成了 className htmlFor 由於 class 和for是javascript 的保留字。

this.props.children

this,props 對象的屬性與組件一一對應可是有一個例外就是 this.props.children 屬性，它表示組件的全部子節點

<script type="text/babel">
varNotesList=React.createClass({
render:function(){
return(
<ol>
{
React.Children.map(this.props.children,function(child){
return<li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.getElementById('example')
);
</script>

this.props.children 的值有三種可能，若是當前組件沒有子節點，他就是 undefind ，若是有一個子節點，數據類型是object 若是有多個子節點那麼它就是 array 。。。

React 提供了一個工具方法， React.Children 來處理 this.props.children 咱們能夠用 React.Children.map來遍歷子節點

不用擔憂 this.props.children 的數據類型了~

相關文章

1. react入門
2. React入門
3. react入門-jsx
4. React入門(2)
5. React Native 入門
6. react 入門
7. react(入門)
8. react-入門
9. react-router入門
10. React入門(1)
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

react從入門到放棄

Spring Boot入門

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<