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

//将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'}
}