react遇到的各种坑
- 标签里用到
<label for>的，for要写成htmlFor - 标签里的
class要写成className - 组件首字母一定要大写
- 单标签最后一定要闭合
- 如果html里要空格转义，
注意不要漏了分号; - style要写成
style={{clear: 'both',backgroundColor:'red',width:'200px'}} - 组件里能用
<button>的地方就不要用input type="button"了，否则写个value还要用{} - 标签里的
ref属性的属性名不要出现中横杠比如message-content，如果有多个单词，直接写成驼峰形式 - 把要改变的数据写进父组件的
getInitialState的属性里，然后通过this.props.listArr传进去，表明初始状态是组件里listArr里的属性。 - 如果将子组件改变的数据传递给父组件呢？可以在父组件里申明一个函数，里面传参
data，然后在创建出子组件的对象的时候在属性上传入父组件的这个函数，然后在子组件里触发了某个事件的函数里，通过this.props.addItem()这样的方式调用父组件的函数，这个addItem就是父组件的函数，里面传参 - 如果组件之间的通信超过的一层，传参就非常麻烦，需要用到
react的一个插件叫PubSub订阅发布
(1) 先导入库
(2) 全局设置一个事件名称，子组件和父组件共用，比如var deleteItem = 'deleteItem';
(3) 子组件，触发事件之后，发布事件
//使用PubSub.publish（）,第一个参数是公用的事件名称，第二个参数是你要传播的值
deleteItemHandler:function(){
PubSub.publish(deleteItem, this.props.item);
},(4) 父组件，是等组件全部渲染之后，因为组件还在内存中，虚拟DOM还没有渲染出来，没有正式出现在页面上时，是获取不到真是DOM的，所以在componentDidMount的函数里订阅一个从子组件发布出来的事件，在渲染完成后，会自动触发这个函数
//使用PubSub.subscribe（）,第一个参数是公用的事件名称，第二个参数是一个回调函数，可以是用箭头函数方式使它内部this指向组件对象，evName是事件对象，data就是子组件发布过来，这里接受到的data
componentDidMount:function(){
PubSub.subscribe(deleteItem,(evName,data) =>{
var newArr = this.state.listArr.filter(function(item,index){
return item!= data;
});
this.setState({
listArr:newArr
});
});
},- 这里顺便复习一下
Array的filter()方法，参数里是个函数，参数是项和下标,return里写一个条件，所有符合条件的都会提取出来放到一个新的数组里，这里将数组里不等于传回来的这个data里的值的每一项都放到了newArr里，然后通过setState()，更新state里数组的值 -
利用
ReactCSSTransitionGroup来添加一些简单的动画效果，比如列表内容增加或者删除时可以有渐进渐出的效果。但是这个标签默认是span标签，使用在table或者options里提示警告，不能在table和options里嵌套span，所以可以通过它本身的component属性，比如component="div"直接将这个标签渲染为我们需要的标签即可。另外css里对应的动画时间要和这里标签里的时间对应var ListComponent = React.createClass({ render: function(){ return ( <ReactCSSTransitionGroup component="div" id="message-container" transitionName="messageContainer" transitionEnterTimeout={800} //这里定义渐进的时间 > { //这里放该组件的子级，也就意味写着这里面所有的内容的都会有动画效果， this.props.mesArr.map(function(ele){ return <ItemComponent key={ele.time} {...ele} /> }) } </ReactCSSTransitionGroup> ) } }); -
通过搜索框输入字符让显示区即时地筛选出搜索结果的效果。这里的难点是，如果直接通过
onChange来获取打入的字符串来更新父组件的state里的数据，会造成数据返回不到原来的状态。所以思路可以是这样的，在父组件state里先创建一个空数组，每次当搜索框获取到焦点时，就把父组件当前的显示数据赋值给这个新建的数组，然后filter的时候是通过这个新数组里的数据进行筛选，而不是原来的数据，另外，当搜索框内容为空或者失去焦点时，再把视图的数据恢复到得到焦点时的状态即可。下面是可以实现的父组件中的代码：
//在搜索框聚焦时，将当前state里的userList赋值给currentList，然后每次输入，筛选的对象都是currentList
focusHandler:function(){
this.state.currentList = this.state.userList;
},
//在失去焦点时立刻将刚才存储的currentList赋值给userList，让视图再恢复到点击搜索框之前
blurHandler:function(){
this.setState(function(){
return {
userList: this.state.currentList
}
});
},
//搜索功能
searchUser:function(text){
//这里要将text进行判断，如果为空，就要让视图呈现刚聚焦时的状态，否则就进行筛选
if(text!=''){
var newText = text.toLowerCase();
var newArr = this.state.currentList.filter(function(item){ //每次点击通过保存的currentList来过滤
return item.username.toLowerCase().indexOf(newText) != -1;
});
this.setState(function(){
return {
userList: newArr
}
});
}else{
this.setState(function(){
return {
userList: this.state.currentList
}
});
}
},- React-Router和动画的结合使用
除了两种技术的结合之外，有个很重要的地方不要忘记，就是要让每个单独的组件设置样式为position:absolute，否则在动画切换时会出现短暂组件叠加的的情况，用户体验非常差，但是绝对定位后，每个组件都在同一个地方渐入渐出了。
//这里是react创建组件的ES6新写法，省略了function和内部的render,return。
const MenuComponent = ({ children, location }) => (
<div> //这里是将组件Menu下控制的路由写在这里，每个路径用Link标签包起来，通过属性to来控制对应不同的路径
<div className="col-md-3 list-group">
<Link to="/statistic" className="list-group-item active">Website Statistic
Data</Link>
<Link to="/topics" className="list-group-item">Hot Topics</Link>
<Link to="/visits" className="list-group-item">Today's Visits</Link>
<Link to="/status" className="list-group-item">Server Status</Link>
</div>
//这里把要对应的做成动画的区域用ReactCSSTransitionGroup包起来
<ReactCSSTransitionGroup className="col-md-9 pr clearfix"
component="div"
transitionName="content"
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
{React.cloneElement(children, {key: location.pathname,className:"pa"})}
</ReactCSSTransitionGroup>
</div>
)
--------------------------------------------------------------
//这里是render方法里的写法
ReactDOM.render(
<Router> //根路由
// "/"代表根路由，IndexRoute表示索引页，如果没有索引页可以作为默认显示的内容
<Route path="/" component={MenuComponent}>
<IndexRoute component={StatisticComponent} />
<Route default path="statistic" component={StatisticComponent} />
<Route path="topics" component={TopicComponent} />
<Route path="visits" component={GuestComponent} />
<Route path="status" component={StateComponent} />
</Route>
</Router>
,document.getElementById('container')
);- 用ES6的箭头函数写组件
const MenuComponent = ({ children, location }) => {
//定义组件里的函数直接在组件里申明即可
const changeLink = (ev) => {
var parent = ev.target.parentNode;
var children = parent.children;
for(var i=0; i<children.length; i++){
children[i].classList.remove('active');
}
ev.target.classList.add('active');
};
//这届写return ()，里面写标签
return (
<div>
<div className="col-md-3 list-group" onClick={changeLink}> //这里不用再写this.changeLink了
<Link to="/statistic" className="list-group-item active">Website Statistic
Data
</Link>
<Link to="/topics" className="list-group-item">Hot Topics</Link>
<Link to="/visits" className="list-group-item">Today's Visits</Link>
<Link to="/status" className="list-group-item">Server Status</Link>
</div>
<ReactCSSTransitionGroup className="col-md-9 pr"
component="div" transitionName="content" transitionEnterTimeout={500} transitionLeaveTimeout={500}
>
{React.cloneElement(children, {key: location.pathname, className: "pa"})}
</ReactCSSTransitionGroup>
</div>
);
};
