import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import MyCommpent from './MyCommpent'
import MyCommpent2 from './MyCommpent2'
// ReactDOM.render(<App />, document.getElementById('root'));
// ReactDOM.render(<MyCommpent/>,document.getElementById('root'))
/***
*定义的数组 需要传递给控件进行解析
*/
let datas=[
{'frstName':'第一个名字1','twoName':'第二个名字1','threeName':'第三个名字1'},
{'frstName':'第一个名字2','twoName':'第二个名字2','threeName':'第三个名字2'},
{'frstName':'第一个名字3','twoName':'第二个名字3','threeName':'第三个名字3'}
]
ReactDOM.render
(
<MyCommpent2 data={datas}> //传递 data属性 里面是个数组
</MyCommpent2>,
document.getElementById('root'))
registerServiceWorker();
下面是进行控件解析数据了
import React ,{Component}from 'react'
class MyCommpent2 extends Component{
render(){
/**
* 通过map循环处理数据，并放到<div>中的<span>中 最后返回整个的空间中就有数据了
*
* @type {Array|Object|*}
*/
let params=this.props.data.map(params=>{
return(
<div>
<span>{params.frstName}</span>
<span>{params.twoName}</span>
<span>{params.threeName}</span>
</div>
)
})
return(
<div>
{params}
</div>
)
}
}
export default MyCommpent2 ;
