前言
学无止境,无止境学。坚持每天学点编程知识,坚持每天写点小文章,坚持每天进步一点点。大家好,我是张大鹏,喜欢学习和分享,希望能够通过此公众号,将自己学到的东西分享给大家,和大家一起交流,一起成长,一起进步。
乾坤未定,你我皆是黑马。大鹏一日同风起,扶摇直上九万里。宝剑锋从磨砺出,梅花香自苦寒来。不积跬步,无以至千里,不积小流无以成江海。
如果有多余的时间,就坚持学习吧,小时候学习改变命运,长大了学习丰富内涵,老了学习带来宁静。活到老,学到老,我能行!
创建元素时指定元素数据
React.createElement的第二个参数接收一个对象,该对象声明要创建的Dom元素应该具备哪些属性。比如我们创建一个h1标签,并给这个标题添加一个ID为title的属性,写法如下:
// 使用react创建一个h1标签
h1Props={
"id": "title"
}
const dish = React.createElement("h1", h1Props, "一级标题")
// 渲染React元素
ReactDOM.render(
dish, // 元素
document.getElementById('app'), // 渲染位置
)
渲染多个元素
ReactDOM.render支持传入一个dom数组,以渲染多个元素。用法如下:
// 使用react创建一个h1标签
h1Props = {
"id": "title"
}
const h1 = React.createElement("h1", h1Props, "一级标题")
const h2 = React.createElement("h2", h1Props, "二级标题")
// 渲染React元素
ReactDOM.render(
[h1, h2], // 元素
document.getElementById('app'), // 渲染位置
)
渲染子元素
React.createElement支持以嵌套的方式来创建子元素。用法如下:
// 使用react创建一个h1标签
h1Props = {
"id": "title"
}
const h1 = React.createElement("h1", h1Props, "渲染子元素")
// 创建子元素
const ul = React.createElement("ul", null,
React.createElement("li", null, "姓名"),
React.createElement("li", null, "年龄"),
React.createElement("li", null, "性别"),
)
// 渲染React元素
ReactDOM.render(
[h1, ul], // 元素
document.getElementById('app'), // 渲染位置
)
通过循环创建列表
React本身是JavaScript,所以可以很方便的实现数据和UI的解耦,这正是React最强大的地方。需要注意的是,每个子元素都应该有一个唯一的key,需要显示的配置。用法如下:
const items = [
"姓名",
"年龄",
"性别",
]
const ul = React.createElement(
"ul", {
className: "items"
},
items.map((item, i) =>
React.createElement("li", {
key: i
}, item)
)
)
ReactDOM.render(
ul,
document.getElementById('app')
)
封装组件
React有另一个非常强大的地方,那就是一个函数就是一个组件。这是JSX的胜利,真的非常的好用。用法如下:
// 声明组件
function ul() {
return React.createElement(
"ul",
null,
React.createElement("li", null, "姓名"),
React.createElement("li", null, "年龄"),
React.createElement("li", null, "性别"),
)
}
// 使用组件
ReactDOM.render(
React.createElement(ul, null, null),
document.getElementById('app')
)
传递组件数据
React的组件也支持接收数据然后动态渲染数据。用法如下:
// 准备数据
const itemsxxx = [
"姓名",
"年龄",
"性别",
]
// 声明组件
function Person({
items
}) {
return React.createElement(
"ul",
null,
items.map((item, index) => React.createElement("li", {
key: index
}, item))
)
}
// 使用组件
ReactDOM.render(
React.createElement(Person, {
items: itemsxxx
}, null),
document.getElementById('app')
)
总结
领取专属 10元无门槛券
私享最新 技术干货