上面的方法是直接將你想要的寫在React.render()里，通常的做法是引用組件

定義一個組件

class 組件名 extends React.Component(
    //your code
);

組件里可以添加很多功能，比如想要添加一個按鈕，你只需直接寫你想要的DOM結(jié)構(gòu)，而不需要使用javascript語法：createElement()、appendChild()等

class 組件名 extends React.Component(
    render(){
        return (Batman);
    }
);

在組件里寫好你想要的東西，使用React.render()進行渲染

React.render(
    <組件名/>,
    想要渲染的位置
)

完整代碼可以如下

效果、頁面結(jié)構(gòu)

我們看到，頁面上出現(xiàn)了我們想要的按鈕，頁面結(jié)構(gòu)里也成功添加了標(biāo)簽。注意?。。〗M件名首字母必須大寫?。?！引用組件注意代碼<組件名/>，一個符號都不能錯的?。?！

使用props

props用來獲取組件的靜態(tài)屬性，可以先看下面的一個小例子：

不必驚慌，修改的地方只有組件的render()和實際渲染的render()兩個函數(shù)。

第一個render()添加了

的type屬性，該屬性值指向{this.props.buttontype}，意思是該組件名為buttontype的靜態(tài)屬性。這個render()還將的顯示文字指向{this.props.children}，意思是該組件的子元素這個靜態(tài)屬性

第二個render()函數(shù)添加了的靜態(tài)屬性buttontype，和一個text類型的子元素Batman

結(jié)論就是：在渲染真實DOM的時候，會創(chuàng)建一個

標(biāo)簽，它的type屬性值為submit，文字顯示為Batman

效果、頁面結(jié)構(gòu)，哈哈哈，沒啥區(qū)別，沒區(qū)別就對了：

props只能從父元素向下傳遞給子元素：

當(dāng)有多個屬性你想傳遞的時候，你的代碼可能就會是這樣的，會重復(fù)很多遍{this.props.propsName}：

如果你不想重復(fù)很多遍繁瑣的{this.props.propsName}，那你可以使用擴展運算符...表示取到所有的靜態(tài)屬性并且都使等于{this.props.propsName}，所以我們的代碼可以稍作簡化：