学会用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;

运行结果

总结 简单父子组件状态 加上状态判断 外加弹性布局