2、在实际写代码中遇到的问题

• 在只有多个组件共享某个数据时，才考虑状态提升，不然每个组件内部都应该只有自己的内部状态数据。

• 引入css文件，直接import css文件路径

• 加载图片，src={require('图片路径')}，并且最好加上alt属性，不然控制台会有警告

• 在为事件传递参数的时候，
  不要直接这样写： <div onClick={this.handleClick(params)}></div> 这样直接导致直接执行了这个函数，但是react文档上，这里要求传递一个函数，而不是函数结果

• 组件的划分
  我觉得，如果是某个组件的子组件，文件目录放置最后也是父子层级的关系；但是如果是所有组件公用的组件就放置在最外层，这样方便看出组件之间的关系

• 在使用map方法生成列表的时候，
  一开始是这样写的：

        <ul className='orderNav__box'>
          {
            this.props.navlists.map((item, index) => {
              <li key={index} 
                      className={this.state.activeIndex === index ? 'li__bottom' : ''} 
                      onClick={this.handleNavClick.bind(this,index)}>
                  {item}
              </li>
            })
          }
        </ul>

不仔细看，真没发现问题在哪里。
其实是箭头函数的简写问题
如果是这样的() => {(li)}，请在大括号里面加return, 上面我就是加了打括号，所以应该加上return
如果是这样的() => (li),就不用加return了。
所以正确的写法应为：

       <ul className='orderNav__box'>
          {
            this.props.navlists.map((item, index) => {
              return <li key={index} 
                      className={this.state.activeIndex === index ? 'li__bottom' : ''
                      } onClick={this.handleNavClick.bind(this,index)}>{item}</li>
            })
          }
        </ul>

后期等我写完自己的demo,再来更新实战的代码编写

（未使用react-router）。