React this.props 传递多个数据 数组(模拟从服务

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 ;