react jsx中樣式渲染

1、行內樣式渲染

import React from 'react';
import ReactDOM from 'react-dom';

const title = {
    color:'red'
}
const songs = [
    {id:1,name:'赤西虐對1'},
    {id:2,name:'赤西虐對2'},
    {id:3,name:'赤西虐對3'},
]

// key的作用：
// 1、記住每一項的狀態，最大限度的複用之前創建好的元素
// 2、提升列表渲染的效率
const list = (
    <ul style={title}>
        {/* map()函數返回值爲一個數組，然後jsx再對返回的數組進行渲染 */}
        {songs.map(item=><li key={item.id}>{item.name}</li>)}
    </ul>
)
ReactDOM.render(list, document.getElementById('root'))

2、外聯樣式：className設置樣式

1）定義/css/index.css：

.title {
  text-align: center;
}

// 引入css
 

import React from 'react'
import ReactDOM from 'react-dom'

// 引入css
import './css/index.css'

/* 
  JSX的樣式處理
*/

const list = (
  <h1 className="title" style={{ color: 'red', backgroundColor: 'skyblue' }}>
    JSX的樣式處理
  </h1>
)

// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))