版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/teamlet/article/details/78796478
React 组件(Component) 也是一种元素Element,只不过是粒度更大一些的、包含更多子元素。
通过React组件，把一些相关的元素组织起来，形成可以复用的、有多个成员的元素的组合。
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Components</title>
</head>
<body>
<!-- Target Container -->
<div id="react-container"></div>
<!-- React Library & React DOM-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script>
class foodList extends React.Component {
render() {
return React.createElement("ul", {"className": "food-list"},
React.createElement("li", null, "1 apple"),
React.createElement("li", null, "1 banana"),
React.createElement("li", null, "2 oranges"),
React.createElement("li", null, "2 tomatos")
)
}
}
const list = React.createElement(foodList, null, null)
ReactDOM.render(
list,
document.getElementById('react-container')
)
</script>
</body>
</html>1、通过继承 React.Component 创建组件
class foodList extends React.Component {
}2、组件中必须包括render函数
class foodList extends React.Component {
render() {
// 创建元素的代码
}
}
3、在render中返回一个元素包含多个子元素的组合
render() {
return React.createElement(
"ul",
{"className": "food-list"},
React.createElement("li", null, "1 apple"),
React.createElement("li", null, "1 banana"),
React.createElement("li", null, "2 oranges"),
React.createElement("li", null, "2 tomatos")
)
}4、通过createElement 传入 component foodList 作为参数创建 list 元素
const list = React.createElement(foodList, null, null)5、渲染
ReactDOM.render(
list,
document.getElementById('react-container')
)