学会用taro封装一个组件

我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣学习前端知识

前言

大家好我是歌谣今天要说得是用taro封装一个组件核心是学会弹性布局

直接上代码

组件部分子组件



import Taro, { Component } from "@tarojs/taro";
import { Text, View, Image } from "@tarojs/components";
import "./index.scss";
/**
 * @description 列表渲染页面
 * @param :musicVedioList 列表渲染数据
 *
 */
class BaseMusic extends Component {
  state = {};
  render() {
    const { musicVedioList = {} } = this.props;
    return (
      <View>
        <View className="music_video">
          <View>
            <View className="music_video_img_title">{musicVedioList.text}</View>
            <Image
              className="music_video_img"
              mode="widthFix"
              src={musicVedioList.src}
            ></Image>
          </View>
          <View className="music_video_info">
            <View className="music_video_header">
              {(musicVedioList.status === 1 || musicVedioList.status === 2) && (
                <View className="music_video_header_left">
                  <Text className="music_video_header_left_text">赠</Text>
                </View>
              )}
              <View className="music_video_header_right">
                {musicVedioList.title}
              </View>
            </View>

            <View className="music_video_body">
              <Text className="music_video_body_left">
                {musicVedioList.learn}
              </Text>
              <View className="music_video_seperator"></View>
              <Text className="music_video_body_right">
                {musicVedioList.learnlist}
              </Text>
            </View>
            <View className="music_video_footer">
              <Text className="music_video_footer_left">
                {musicVedioList.price}
              </Text>
              <Text className="music_video_footer_right">
                {musicVedioList.count}
              </Text>
            </View>
          </View>
        </View>
        {musicVedioList.status === 1 && (
          <View className="music_video_info_text">
            <Text className="music_video_info_text_left">赠送人:</Text>
            <Text className="music_video_info_text_text">
              {musicVedioList.count}
            </Text>
            <Text className="music_video_info_text_right">赠送人手机号码:</Text>
            <Text className="music_video_info_text_text">
              {musicVedioList.count}
            </Text>
          </View>
        )}
        {musicVedioList.status === 2 && (
          <View className="music_video_info_text">
            <Text className="music_video_info_text_left">领取人:</Text>
            <Text className="music_video_info_text_text">
              {musicVedioList.count}
            </Text>
            <Text className="music_video_info_text_right">领取人手机号码:</Text>
            <Text className="music_video_info_text_text">
              {musicVedioList.count}
            </Text>
          </View>
        )}
      </View>
    );
  }
}

export default BaseMusic;

父组件调用

import Taro, { Component } from "@tarojs/taro";
import BaseMusic from "@/components/BaseMusicVedio";
import { Text, View, Image } from "@tarojs/components";
class donationHistory extends Component {
  state = {
    musicVedioList: {
      src:
        "https:d/R-C.0620e8589f9dd002dd58572b61120c78?rik=IOJRD57WVYlxQw&riu=http%3a%2f%2fimg.ivsky.com%2fim=ImgRaw&r=0",
      title: "30个字壹贰叁肆伍陆柒捌玖拾壹贰叁肆伍陆柒捌玖拾",
      learn: "我是learn",
      learnlist: "我要学习",
      price: "￥100",
      count: "100",
      status: 2,
      text: "你好呀你好呀"
    }
  };
  render() {
    const { musicVedioList } = this.state;
    return (
      <View>
        <BaseMusic musicVedioList={musicVedioList}></BaseMusic>
      </View>
    );
  }
}
export default donationHistory;