react⾏内样式⼏种写法法⼀
<h1 style={{color:'red',fontSize:'30px'}}>这是评论列表组件1</h1>
法⼆
const title={color:"red",fontSize:'30px',fontWeight:'400',textAlign:'center'},
<h1 style={{title}}>这是评论列表组件1</h1>
法三
将数据合并到⼀个对象中定义，也可以如下⾯这样抽离出去
import React from 'react'
import CmtItem from '@/components/CmtItem'
import styles from '@/components/csslist.js'
export default class Cmtlist extends React.Component{
constructor(){
super()
this.state={
CommentList:[
{id:1,user:'张三1',content:'格外'},
{id:2,user:'南⽅2',content:'的'},
{id:3,user:'车站3',content:'寒冷'},
weight的几种形式
{id:4,user:'的雪4',content:'哈哈哈'},
{id:5,user:'嗝的5',content:'哈哈哈'}
]
}
}
render(){
return <div>
<h1 style={styles.title}>这是评论列表组件1</h1>
{this.state.CommentList.map(item=><CmtItem {...item} key={item.id}></CmtItem>)}
</div>
}
}//页⾯csslist.js
//将css⾏内样式以变量的形式抽离出去
export default{
title:{color:"red",fontSize:'30px',fontWeight:'400',textAlign:'center'},
itembox:{border:'1px dashed #ccc',margin: '10px',padding:'10px',boxShadow:'0px 10px 10px #ccc'},
user:{fontSize:'14px'},
content:{fontSize:'12px'}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。