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

定義一個組件

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

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

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

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

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

完整代碼可以如下

效果、頁面結構

我們看到，頁面上出現了我們想要的按鈕，頁面結構里也成功添加了標簽。注意！！！組件名首字母必須大寫！！！引用組件注意代碼<組件名/>，一個符號都不能錯的！！！

使用props

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

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

第一個render()添加了

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

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

結論就是：在渲染真實DOM的時候，會創建一個

標簽，它的type屬性值為submit，文字顯示為Batman

效果、頁面結構，哈哈哈，沒啥區別，沒區別就對了：

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

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

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