学会用taro封装一个组件

Posted 2021-10-20 前端小歌谣

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

 前言

大家好 我是歌谣 今天要说得是用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>