react遇到的各种坑

Posted 2020-09-09 霓虹！！

• 标签里用到<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>
    );
};