综合概述：比较上一个例子，数据从实际接口获取的，首先调取接口获取一级类目，然后根据一级类目的id分别获取对应的二级类目
1.GoodsClassify 组件获取一级类目作为数据源初始化props，通过map循环组件<GoodsDl key={dlindex} obj={o} dlindex={dlindex} />，渲染出<dl><dt></dt></dl>列表，首次render之后，进入componentDidMount生命周期，获取实际dom节点的id，调用二级类目接口，将数组保存在ddArray中，再次渲染出二级类目。
2.componentDidMount仅在首次渲染后执行一次，之后不再执行，componentWillUpdate，首次渲染不执行，在之后状态更新后才执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实际项目中React 类目选择组件</title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="GoodsClassify"></div>
<script type="text/babel">
var data=[{type:'衣服类',items:['衣服一','衣服二','衣服三']},{type:'电器类',items:['电器一','电器二','电器三']}];
var GoodsDl=React.createClass({
getInitialState:function(){
return {
check:false, //父的选中状态
childCheckboxNum:0,//父checkbox下子checkbox的数量
childBeChecked:0, //子checkbox被选中的数量
ifuncheckall:true, //childCheckboxNum==childBeChecked时 为true，表示父checkbox取消选择时可以取消所有子checkbox
//父被取消另一种场景是子全选中时，取消某个子checkbox，父被取消，但其他子不必取消，此时为false
ddArray:[]
}
},
selectAll:function(){
this.state.check=!this.state.check;
this.setState({
check:this.state.check
})
if(this.state.check){
this.state.childBeChecked=this.state.childCheckboxNum;
this.state.ifuncheckall=true
}else{
this.state.childBeChecked=0;
}
},
childAffectFather:function(flag){
if(!flag){ //子未被选中
this.setState({
check:false,//父取消选中
ifuncheckall:false// 父被动取消选中，其他子不被取消
})
this.state.childBeChecked-=1;
}else{
this.state.childBeChecked+=1;
if(this.state.childBeChecked==this.state.childCheckboxNum){
this.selectAll();
}
}
},
componentDidMount:function(){ //this.getDOMNode() or ReactDOM.findDOMNode(this)//初次渲染调用一次
var _this=$(ReactDOM.findDOMNode(this));
var dirId=_this.find('dt').attr("data-dirid");
var that=this;
$.ajax({
url:"http://***/getThirdLevelCategoryList.html",
type:"post",
data:{firstLevelDirId:dirId},
dataType:"json",
success:function(data){
that.setState({
ddArray:data.data,
childCheckboxNum:data.data.length
})
}
})
},
componentWillUpdate:function(){//初次渲染不调用，状态更新时调用
var _this=$(ReactDOM.findDOMNode(this));
},
render:function(){
var o=this.props.obj;
var dd=this.state.ddArray.map(function(i,j){
return (
<dd key={"dd_"+this.props.dlindex+"_"+j}>
<label>
<GoodsCheckbox dlcheck={this.state.check} ifuncheckall={this.state.ifuncheckall} childAffectFather={this.childAffectFather} addChecked={this.addChecked} subChecked={this.subChecked} />{i.dirName}
</label>
</dd>
)
}.bind(this));
return (
<dl>
<dt data-dirid={o.dirId}>
<input onChange={this.selectAll} dlcheck={this.state.check} type="checkbox" checked={this.state.check} />{o.dirName}
</dt>
{dd}
</dl>
)
}
});
var GoodsCheckbox=React.createClass({
getInitialState:function(){
return {
check:false
}
},
componentWillReceiveProps:function(nextProps){
if(nextProps.dlcheck){
this.setState({
check:true
})
}
else{
if(nextProps.ifuncheckall){
this.setState({
check:false
})
}
}
},
selectOne:function() {
this.state.check=!this.state.check;
this.setState({
check:this.state.check
})
this.props.childAffectFather(this.state.check);
},
render:function(){
return <input onChange={this.selectOne} type="checkbox" checked={this.state.check}/>
}
});
var GoodsClassify=React.createClass({
getDefaultProps:function(){
var dataList=[];
$.ajax({
url:"http://**/getFirstLevelCategoryList.html",
type:"post",
dataType:"json",
async:false,
success:function(data){
if(data.success){
dataList=data.data;
}else{
//ui.alert(data.message,2000,false)
}
}
});
return {
dataList:dataList
}
},
render:function(){
var data=this.props.dataList;
var list=data.map(function(o,dlindex){
return <GoodsDl key={dlindex} obj={o} dlindex={dlindex} />
});
return <div>{list}</div>
}
});
ReactDOM.render(
<GoodsClassify />,
document.getElementById('GoodsClassify')
);
</script>
</body>
</html>
相关推荐
综上所述，React组件的CSS选择器涉及多种方法和技术，包括CSS Modules、CSS-in-JS、BEM、预处理器等，开发者可以根据项目需求和团队习惯选择合适的方式。同时，理解CSS选择器的工作原理和优先级，以及如何优化性能，...
在实际项目中，这样的实现方式可以让我们在不改变现有DOM结构的情况下，将React组件嵌入到任何自定义元素中，极大地提高了代码的灵活性和可复用性。同时，自定义元素的特性也可以帮助我们在React应用中实现更好的...
通过查看源代码，你可以更深入地理解如何在实际项目中应用这种优雅的水印解决方案。 总结来说，优雅地在React组件中添加水印需要考虑组件化、可配置性和性能优化。通过使用高阶组件，我们可以轻松地将水印功能集成...
在IT行业中，跨框架开发是常见的需求之一，例如将已有的React组件转换为Vue组件。React和Vue都是流行的JavaScript库，它们各自具有独特的设计哲学和API。本篇将详细讲解如何进行这种转换，并探讨两者之间的差异，...
4. **事件处理**：组件需要监听用户的点击事件，当用户选择一个选项时，更新状态并可能触发父组件的回调函数，以通知父组件选择的变化。 5. **多选与单选机制**：多选可以通过设置一个数组来存储已选值，单选则只需...
react组件的ppt，格式为key，组件的概念，定义，创建方法
在项目实际应用中，`react-SVGR`的组件可以像其他React组件一样导入和使用： ```jsx import MyIcon from './my-icon.svg'; function MyComponent() { return ; } ``` 总结来说，`react-SVGR`是React开发中处理...
在实际应用中，我们可以使用以下步骤来利用"react-super-progress"创建组件： 1. **安装依赖**：首先，你需要在你的项目中安装这个库。如果你的项目使用npm，可以通过命令`npm install react-super-progress`进行...
2. `examples`目录：可能包含了一些示例项目，演示如何在实际应用中使用这个库。 3. `README.md`：项目的说明文档，提供了安装、使用和API的详细指南。 4. `package.json`：项目配置文件，包含了依赖、版本等信息，...
在IT行业中，React.js是一个非常流行的JavaScript库，用于构建用户...通过这个React地址选择器项目，开发者可以学习到React组件设计、状态管理和事件处理等核心技能，同时也能提升在实际项目中解决复杂UI问题的能力。
React 项目架构与电商项目布局 React 框架是当前最流行的前端框架之一，对于初学者来说，如何快速上手写一个项目是一个非常重要的问题。本文将为读者详细讲解 React 项目架构、电商项目布局及代码实现。 一、 ...
在“react-css-component-master”这个压缩包中，可能包含了一个演示如何在React组件中注入CSS的示例项目。通过查看源码，我们可以学习如何在实际开发中应用这些技术。通常，项目会包含以下几个部分： 1. `src/...
本文通过实际项目案例，深入探讨了编写React组件的最佳实践，包括基于类的组件、状态初始化、propTypes和defaultProps的使用，以及方法定义等方面。以下是对这些知识点的详细说明： 1. **基于类的组件**： React...
在使用KyleAMathews-react-sparkline-136b951这个版本时，你需要注意的是，由于开源项目可能不时进行更新和改进，所以在实际部署前，最好查看项目的文档以了解最新的API和最佳实践。同时，检查项目的问题跟踪器和...
下面将详细阐述这个组件的核心特点、用法以及如何在实际项目中应用。 一、核心特点 1. **灵活性**：react-watermark-module 支持两种类型的水印，即图片水印和文字水印，这为开发者提供了丰富的选择，可以根据需求...
React-Datetime 是一款高度可定制且功能齐全的日期时间选择器组件，专为React.js框架设计。这个组件提供了一个简洁的用户界面，使得在React应用中处理日期和时间输入变得简单易行。它不仅提供了基本的日期和时间选择...
- `examples/`或`demo/`：可能包含了一些示例代码，展示如何在实际项目中使用组件。 要使用这个组件，开发者首先需要安装它，这通常通过npm或yarn完成。然后，通过import导入并在项目中使用。在实际项目中，根据...
在React的世界里，组件是构建用户界面的基本单元。...在实际项目中，结合`react-swipe`的源码`voronianski-react-swipe-b617e82`进行深入研究，可以更好地理解和定制这个组件，以适应项目的具体需求。
在实际项目中，使用NutUI React Next 可以大大提升开发效率。开发者可以通过简单的引入和配置，快速集成到项目中。例如，可以使用npm或yarn进行安装： ```bash npm install nutui-react-next # 或 yarn add nutui-...
《Garden React组件：探索开源项目的深度解析》 在当今的Web开发领域，React作为一款由Facebook维护的JavaScript库，已经成为了构建用户界面的首选工具。而“Garden React组件”是一个开源项目，旨在为开发者提供一...