react怎么写行内样式?

react怎么写行内样式?下面本篇文章给大家介绍一下react 行内样式几种写法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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:'寒冷'},
        {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

更多web前端知识,请查阅 HTML中文网 !!

以上就是react怎么写行内样式?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏