react类名、id 、style等属性绑定，for循环输出html， map/forEach数组遍历 &&对象遍历

class 用className绑定：

<p className="title">春夏秋冬</p>

id属性绑定不变：

<p id="demo1">四季如春</p>

行内样式绑定：

<p style={{"color":"blue",'fontSize':'60px'}}>春光满面</p>

定义样式变量

import React from 'react'
class A extends React.Component {
    render() {
      let box = {
        backgroundColor:'f1f1f1',
        color:'red',
        fontSize:30
    };
    return (
      <div style={box}>
          a页面
      </div >
    )
  }
}
export default A

map遍历要注意：
1、需要给子节点一个唯一的标识符 key
2、一定要return给render

例如：

import React from 'react'
const List = [
  { title: '早饭', food: '面条' },
  { title: '午饭', food: '煎饼' },
  { title: '晚饭', food: '火锅' }
]
class Home extends React.Component {
  render() {
    return (
      <div>
        <ol>
          {List.map((item, index) =>{
            return <li key={index}>{item.title}:{item.food}</li>
          })}
        </ol>
      </div >
    )
  }
}
export default Home

forEach遍历

import React from 'react'
const List = [
  { title: '早饭', food: '面条' },
  { title: '午饭', food: '馅饼' },
  { title: '晚饭', food: '火锅' }
]
class Home extends React.Component {
  render() {
    const elements = [] 
    List.forEach((item, index) => {
        elements.push(
            <li key={index} >{item.title}</li>
        )
    })
    return (
      <div>
        <ul>{elements}</ul>
      </div >
    )
  }
}
export default Home

for 对象遍历

import React from 'react'
let obj={ title1: '早饭', title2: '午饭', title3: '午饭', }
class Home extends React.Component {
  render() {
    const elements = [] 
    for(let v in obj){
      <li>{v}</li>
    }
    return (
      <div>
        <ul>
         {elements}
     </ul>
      </div >
    )
  }
}
export default Home