作者：龙鹰的天涯 | 来源：互联网 | 2023-08-17 20:51
看完React官网的核心知识点，思考如何应用在实际的项目中呢？第一步：先将UI设计图划分成各个React组件，划分的规则可以根据最小功能单位，或者是根据JSON数据模型
&＃160;看完React官网的核心知识点，思考如何应用在实际的项目中呢？
第一步：先将UI设计图划分成各个React组件，划分的规则可以根据最小功能单位，或者是根据JSON数据模型。
第二部：通过React写静态页面结构。
第三步：添加动态交互功能。
总结：子组件的数据源来自父组件，边界情况下会出现undefined，所以在渲染子组件的之前需要判断从父组件传来的数据是否是有效数据，如果不是直接return null;
本代码思路就是顶层的父组件处理所有的业务逻辑。
class Item extends React.Component {
render() {
return (
{this.props.name} |
{this.props.price} |
)
}
}
function Category(props){
const categoryItems = props.category
if(!categoryItems.length) {
return null
}
return (
| {categoryItems[0].category} |
{categoryItems.map((item)=> {
return (
)
})}
)
}
class Table extends React.Component {
render() {
let sporting_goods = [],
electrOnics= []
const products = this.props.products
for(let i=0; i
if(products[i].category === &＃39;Sporting Goods&＃39;) {
sporting_goods.push(products[i])
} else {
electronics.push(products[i])
}
}
return(
)
}
}
class Search extends React.Component {
render() {
return (
)
}
}
class ProductFilter extends React.Component {
constructor(props) {
super(props)
this.state = {
value: &＃39;&＃39;,
isStock: false
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
const value = (e.target.type === &＃39;checkbox&＃39;) ? e.target.checked : e.target.value
const name = e.target.name
this.setState({
[name]: value
})
}
render() {
let ret = []
if(this.state.value) {
if(this.state.isStock){
PRODUCTS.forEach((item) => {
if(!item.stocked) {
return
}
if(item.name.toUpperCase().indexOf(this.state.value.toUpperCase()) >= 0) {
ret.push(item)
}
})} else {
PRODUCTS.forEach((item) => {
if(item.name.toUpperCase().indexOf(this.state.value.toUpperCase()) >= 0) {
ret.push(item)
}})
}
} else {
ret = PRODUCTS
}
return (
)
}
}
ReactDOM.render(, document.getElementById(&＃39;root&＃39;))
const PRODUCTS = [
{category: &＃39;Sporting Goods&＃39;, price: &＃39;$49.99&＃39;, stocked: true, name: &＃39;Football&＃39;},
{category: &＃39;Sporting Goods&＃39;, price: &＃39;$9.99&＃39;, stocked: true, name: &＃39;Baseball&＃39;},
{category: &＃39;Sporting Goods&＃39;, price: &＃39;$29.99&＃39;, stocked: false, name: &＃39;Basketball&＃39;},
{category: &＃39;Electronics&＃39;, price: &＃39;$99.99&＃39;, stocked: true, name: &＃39;iPod Touch&＃39;},
{category: &＃39;Electronics&＃39;, price: &＃39;$399.99&＃39;, stocked: false, name: &＃39;iPhone 5&＃39;},
{category: &＃39;Electronics&＃39;, price: &＃39;$199.99&＃39;, stocked: true, name: &＃39;Nexus 7&＃39;}
]&＃160;
推荐阅读
-
在《Cocos2d-x学习笔记：基础概念解析与内存管理机制深入探讨》中，详细介绍了Cocos2d-x的基础概念，并深入分析了其内存管理机制。特别是针对Boost库引入的智能指针管理方法进行了详细的讲解，例如在处理鱼的运动过程中，可以通过编写自定义函数来动态计算角度变化，利用CallFunc回调机制实现高效的游戏逻辑控制。此外，文章还探讨了如何通过智能指针优化资源管理和避免内存泄漏，为开发者提供了实用的编程技巧和最佳实践。 ...
[详细]
蜡笔小新 2024-11-11 14:49:31
-
本文探讨了C++异步编程中获取线程执行结果的方法与技巧，并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型，本文详细介绍了如何高效地处理多线程任务，确保程序的稳定性和性能。同时，文章还结合实际案例，展示了这些方法在前端异步编程中的具体实现和优化策略。 ...
[详细]
蜡笔小新 2024-11-09 15:14:28
-
-
在 Vue 应用开发中，页面状态管理和跨页面数据传递是常见需求。本文将详细介绍 Vue Router 提供的两种有效方式，帮助开发者高效地实现页面间的数据交互与状态同步，同时分享一些最佳实践和注意事项。 ...
[详细]
蜡笔小新 2024-11-08 12:45:14
-
第六章深入探讨了枚举类型与 `switch` 结构在编程中的应用。枚举类型（`enum`）是一种将一组相关常量组织在一起的数据类型，广泛存在于多种编程语言中。例如，在 Cocoa 框架中，处理文本对齐时常用 `NSTextAlignment` 枚举来表示不同的对齐方式。通过结合 `switch` 结构，可以更清晰、高效地实现基于枚举值的逻辑分支，提高代码的可读性和维护性。 ...
[详细]
蜡笔小新 2024-11-07 14:36:27
-
技术日志：使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告 ...
[详细]
蜡笔小新 2024-11-07 14:33:19
-
Vue ElementUI 实现邮箱地址自动补全功能详解 ...
[详细]
蜡笔小新 2024-11-07 10:27:26
-
JavaScript XML操作实用工具类：XmlUtilsJS技巧与应用 ...
[详细]
蜡笔小新 2024-11-06 15:15:26
-
Vue 开发技巧：实现数据过滤与排序功能详解 ...
[详细]
蜡笔小新 2024-11-11 16:43:09
-
在尝试对 QQmlPropertyMap 类进行测试驱动开发时，发现其派生类中无法正常调用槽函数或 Q_INVOKABLE 方法。这可能是由于 QQmlPropertyMap 的内部实现机制导致的，需要进一步研究以找到解决方案。 ...
[详细]
蜡笔小新 2024-11-11 15:34:22
-
Web开发涉及服务器端和客户端的协同工作。在服务器端，Java是一种优秀的编程语言，适用于构建各种功能模块，如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示，同时借助JavaScript增强交互性和动态效果。此外，现代Web开发还广泛使用各种框架和库，如Spring Boot、React和Vue.js，以提高开发效率和应用性能。 ...
[详细]
蜡笔小新 2024-11-09 11:59:38
-
本文介绍了一种利用 Vue.js 和 Element UI 框架构建的简洁登录界面设计。该设计不仅注重用户体验，还确保了界面的美观性和易用性。通过合理的布局和组件配置，实现了高效、响应式的登录功能，适用于多种前端应用场景。 ...
[详细]
蜡笔小新 2024-11-09 11:15:25
-
在初次访问某个网站时，由于本地没有缓存，服务器会返回一个200状态码的响应，并在响应头中设置Etag和Last-Modified等缓存控制字段。这些字段用于后续请求时验证资源是否已更新，从而提高页面加载速度和减少带宽消耗。本文将深入探讨HTTP缓存机制及其在实际应用中的优化策略，帮助读者更好地理解和运用HTTP协议。 ...
[详细]
蜡笔小新 2024-11-09 10:12:07
-
本文将继续探讨 JavaScript 函数式编程的高级技巧及其实际应用。通过一个具体的寻路算法示例，我们将深入分析如何利用函数式编程的思想解决复杂问题。示例中，节点之间的连线代表路径，连线上的数字表示两点间的距离。我们将详细讲解如何通过递归和高阶函数等技术实现高效的寻路算法。 ...
[详细]
蜡笔小新 2024-11-08 19:44:31
-
Java环境中Selenium Chrome驱动在大规模Web应用扩展时的性能限制分析 ...
[详细]
蜡笔小新 2024-11-07 10:10:30
-
本文探讨了利用JavaScript实现集合的对称差集算法的方法。该算法旨在处理多个数组作为输入参数，同时保留每个数组中元素的原始顺序。算法不会移除单个数组内的重复元素，但会删除在不同数组之间出现的重复项。通过这种方式，能够有效地计算出多个数组的对称差集。 ...
[详细]
蜡笔小新 2024-11-06 19:31:06
-
京公网安备 11010802041100号