react学习过程记录2（包含项目home中出现的问题）

1.react中在父组件调用子组件传值的时候，注意在data={ {} }值是以对象形式传递，比如在父组件father调用子组件child: <child data={{name:[1,2,3]}}>是这样传递一个数组的。

2.当我们给子组件传递一个数组的时候，这个数组怎么在子组件中输出呢？

 render() {
    const {name}=this.props.data
    return (

      <div className="App">
       {
         name.map((item)=>{
          return <a>{item}</a>
       })
      }
      </div>
    );
  }

可以看到在render()中前面是定义的常量和变量，后边是一个总的return，然后在div内部使用相关变量的时候必须加上大括号{}，比如div中使用map输出数组name，操作中必须加上一个{}。此外，在只要输出标签，必须加上return，就像这里输出a，不加return，什么也不会输出，所以可以有多个return？？

3. css样式中使用key:value,注意value不要加双引号

4. 有一个数组name=[4,5,6], 数组里面有几个元素就循环输出几个a标签，然后第一个a标签有个特殊样式，其它a标签是普通样式，当我点击任何一个a标签的时候，被点击的那个a标签有特殊样式，其它恢复普通样式，我用下面的react实现，说循环调用,我的实现：

 constructor(props) {
    super(props);
    this.state = {currentIndex:0};
  }

  HandleClick=(value)=>{
    this.setState({
      currentIndex:value

    })
  }

  render() {
    const {name}=this.props.data
    return (

      <div className="App">
       {
         name.map((item,k)=>{
            return <a href="#" className={(k===this.state.currentIndex)?'cur':''} key={k} onClick={ this.HandleClick(k)}>{item}<br></br></a> 
       })
      }
      </div>
    )
  } 
}

然后报错，Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
重复调用了 setstate，导致在循环触发update钩子
然后把事件调用改成了onClick={ () => this.HandleClick(k)}
所以这是一个reactjs事件处理函数绑定this的问题，参考https://www.cnblogs.com/feiying100/p/6649611.html

5.项目中使用箭头函数出现了一个问题？？

<div className="location_choice">
                  {
                        HotCityInfo.filter((value,key) => key<8).map((city,index) => (
                            //return 
                                <a  key={index}
                                    href='javascript:void(0)' 
                                    className={(index===this.state.currentIndex)?'cur':''} 
                                    onClick={ () => this.HandleClick(index)}>
                                    {city.Name}
                                </a>
                        ))
                    }
                    </div>

目的是在一个div内部循环输出多个a标签，可是就是输出不来，好像代码没有执行，错误在于箭头后边写的是{}，实际应该写() ?????

6.react中获取元素dom的方法

• 使用document.getXXX，但是一定要注意不能在组件内部（render里面）使用，不然会报document没定义，可以在组件外 部定义一个const函数，在函数里面使用document.getXXX，然后在组件内部通过调用函数来获得元素dom
• 使用ref, 在同一个组件的处理函数中使用：http://www.runoob.com/react/react-refs.html
• 在父组件中获取子组件的dom元素：https://blog.csdn.net/zhengjie0722/article/details/78360719

7.又被坑了一次的箭头函数

() => ()
() => {}
users => users[0]

当{}消失后，return关键字也跟着消失了。单行的箭头函数会提供一个隐式的return（这样的函数在其他编程语言中常被成为lamda函数）。
仅仅当箭头函数为单行的形式时，才会出现隐式的return。当箭头函数伴随着{}被声明，那么即使它是单行的，它也不会有隐式return，所以当你在react中使用箭头函数，有使用了{}，必须加上return, 如果不想写return,可以把{}改成(),也就是{return….}或者()

x => { foo: x }//是错的
x => ({ foo: x })//对的

如果要返回一个对象，就要注意，如果是单表达式，因为和函数体的{ … }有语法冲突，所以要改为上面所示，不止在返回对象时如此，返回html元素的时候也是必须使用()不能用{}!!!!!!!(被坑了很多次)