React初学-1

storybook:

https://github.com/storybooks/storybook
https://storybook.js.org/
https://storybook.js.org/basics/guide-react/
UI开发及测试环境
利用StoryBook开发UI组件管理

carbon

carbon-components-react
使用redux-devtools工具

组件

timeline list 时间线组件

timeline

calendar 日历组件

calendar

样式CSS

左侧容器跟随右侧容器高度改变而改变

问题

大括号是很多问题的解
比如这个嵌套map的问题

render() {
  return (
      

          {
              json.payload.map(j =>
               

                   {j.name}
                   {j.brands.map(b =>
                       

                           {b.name}
                           {b.subProducts.map(s =>
                               

                                   {s.name}
                               
)
                           }
                       
                   )}
               
              )
          }
      
  );
}

表达式都会用大括号括一下，然后表达式里就是纯JS；

选择日期，使用React-Redux，这个是每回都会新增日期

const initialState = {
    dates: []
}

export default function (state = initialState, action) {
    switch (action.type) {
        case SelectDates: {
            const { dates } = action.payload;
            return {
                ...state,
                dates: [...state.dates, dates]
            };
        }
        default:
            return state;
    }
}