首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

初探React编程逻辑（结合业务需求）

作者：龙鹰的天涯 | 来源：互联网 | 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(






Name Price




)
}
}
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;


推荐阅读
author-avatar
龙鹰的天涯
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有