React

上面的方法是直接将你想要的写在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}，所以我们的代码可以稍作简化：