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