【React】React全栈脚手架搭建-苹果篮子示例

Z时代
2024-01-10
分类：综合

react

接着上一章，脚手架已经搭建完毕，接下来便可以编写组件

根据视图，我们可以将其切割为两部分

AppleItem：里面的苹果列表项

AppleBasket：包着苹果列表项的篮子

解析苹果篮子的数据结构，应该有一个苹果列表 apples（每个苹果具有id，重量，是否被吃掉的标志），是否在采摘苹果状态标记等，如下

const basket = {
    isPicker:false,
    newAppleId:3,
    apples:[
      {
        id:1,
        weight:230,
        isEaten:false
      },
      {
        id:2,
        weight:120,
        isEaten:true
      }
    ]}

看一下我们的项目结构：红色圈起来的是这次组件编写需要动到的部分

具体组件如何编写，直接贴出代码

AppleItem：props只需传递进来具体一个苹果的数据apple和吃掉苹果的处理函数eatApple

import React from 'react';
import './index.less';
import '../../styles/common.less';
import appleImg from '../../assets/apple.png'
class AppleItem extends React.Component {
  render(){
    let {apple,eatApple} = this.props;
    return(
      <div className="apple-item row">
        <div className='row'>
          <div className="apple"><img src={appleImg} alt="苹果图片"/></div>
          <div className="info">
            <div className="name">红苹果 - {apple.id}号</div>
            <div className="weight">{apple.weight}克</div>
          </div>
        </div>
        <div className="btn-div"><button onClick={eatApple.bind(this,apple.id)}>吃掉</button></div>
      </div>
    )
  }
}
export default AppleItem;

AppleBasket：这个稍微复杂点，但是也没那么复杂。props接收外界传递进来的就是整个苹果篮子的数据，以及各种苹果处理函数

拿到整个苹果篮子的数据appleBasket，就需要将其转化为我们需要的数据。map遍历appleBasket.apples，统计已吃跟未吃的苹果数量，重量，将未吃苹果push进新数组。

import React from 'react';
import './index.less';
import '../../styles/common.less'
import AppleItem from '../AppleItem';
class AppleBasket extends React.Component {
  render(){
    const {appleBasket,actions} = this.props;
    let stats = {
      isPicker:appleBasket.isPicker,
      eat:{num:0,weight:0},
      noeat:{num:0,weight:0},
      apples:[]
    }
    appleBasket.apples.map(elem => {
      let name = elem.isEaten?"eat":"noeat";
      stats[name].num++;
      stats[name].weight += elem.weight;
      if (!elem.isEaten) {
        stats.apples.push(elem);
      }
    })
    function getNoApple(){
      if (stats.apples.length===0 && !stats.isPicker) {
        return <div className='no-apple'>篮子空空如也，快去摘苹果吧</div>
      }
      return;
    }
    const that = this;
    function getApples(){
      let data = [];
      if (!stats.isPicker) {
        data.push(stats.apples.map((apple,index) => <AppleItem key={apple.id} apple={apple} eatApple={that.props.actions.eatApple}/> ))
      }else{
        return <div className='no-apple'>正在采摘苹果...</div>
      }
      return data;
    }
    return(
      <div className="apple-basket">
        <div className="title">苹果篮子</div>
        <div className="stats row">
          <div className='col current'>
            <div className="label">当前</div>
            <div><span>{stats.noeat.num}</span>个苹果，<span>{stats.noeat.weight}</span>克</div>
          </div>
          <div className='col eat'>
            <div className="label">已吃掉</div>
            <div><span>{stats.eat.num}</span>个苹果，<span>{stats.eat.weight}</span>克</div>
          </div>
        </div>
        <div className="apple-list col">
          {getApples()}
          {getNoApple()}
        </div>
        <div className="btn-panel row"><button className={stats.isPicker ? 'disabled' : ''} onClick={actions.pickApple}>摘苹果</button></div>
      </div>
    )
  }
}
export default AppleBasket;

组件的编写就完成了。

启动storybook：npm run storybook

打开 http://localhost:9009便可以看到效果

要想在storybook看到我们编写的组件就需要在 stories/index文件里面add我们的组件

语法十分简单，便可以引入我们的组件

storiesOf('Apple',module)
  .add("AppleItem",()=>(<AppleItem apple={apple} eatApple={action("eatApple")}/>))  .add("AppleBasket",()=>(<AppleBasket appleBasket={basket} actions={appleActions}/>))

需要传递给组件的props数据需要我们事先编写，可以理解为我们的测试数据。最终完整的引入如下

import AppleItem from '../src/components/AppleItem/index'
import AppleBasket from '../src/components/AppleBasket/index'
const basket = {
    isPicker:false,
    newAppleId:6,
    apples:[
      {
        id:1,
        weight:230,
        isEaten:false
      },
      {
        id:2,
        weight:120,
        isEaten:true
      },
      {
        id:3,
        weight:290,
        isEaten:false
      },
      {
        id:4,
        weight:118,
        isEaten:false
      },
      {
        id:5,
        weight:280,
        isEaten:true
      }
    ]
  }
const apple = {id:3,weight:280,isEaten:false};
const appleActions = {
  eatApple: (id) => action("eatApple")(id),
  pickApple: () => action("pickApple")('摘苹果')
};
storiesOf('Apple',module)
  .add("AppleItem",()=>(<AppleItem apple={apple} eatApple={action("eatApple")}/>))  .add("AppleBasket",()=>(<AppleBasket appleBasket={basket} actions={appleActions}/>))