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 = (
    

        {/* map()函数返回值为一个数组，然后jsx再对返回的数组进行渲染 */}
        {songs.map(item=>
{item.name}
)}
    
)
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 = (
  

    JSX的样式处理
  
)
// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))


作者：西瓜皮儿的皮儿
                    

 
                


                            jsx
                            React