React study notes three: demo "in"

2. Carousel diagram processing

1) Basic use 

   a) Open the Carousel component document Carousel component of antd-mobile 

  b) Select "Basic" and click "</>" to display the source code

  c) Copy the core code to the Index component

  d) Adjust the code to make it run

2) Get carousel data

  a) Install axios

npm i axios -S

  b) Import axios in the Index component

  c) Add carousel graph data in state: swipers

  d) Create a new method getSwipers to obtain the carousel data and update the swipes data

  e) Call this method in the componentDidMounte hook function

  f) Use the acquired data to render the carousel

3) Navigation menu

  a) Open the Flex layout component, the Flex component , the other steps are the same as above

 

3. Rental team

1) Business introduction:

  a) Display different information according to the current geographic location

2) Data acquisition

  a) Add rental group data in state: groups

  b) Create a new method getGroups, get the data through the interface, and update the groups

  c) Call getGroups in componentDidMount

3) Open the Grid grid document   Grid component