我是歌謠 放棄很容易 但是堅持一定很酷 微信公眾號關注前端小歌謠學習前端知識

?前言

大家好 我是歌謠 今天要說得是用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><ImageclassName="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;

運行結果

總結 簡單父子組件狀態 加上狀態判斷 外加彈性布局

?

總結

以上是生活随笔為你收集整理的学会用taro封装一个组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。