react中的props传递，如何从父组件传到子组件，从而改变子组件的相关内容和显示信息。继续从我们第一节课开始进行对props的相关设置。
为了演示props的使用方法，这里我们先在index.js添加一段模拟json数据。代码如下：
//定义相关data数据
const contents = [
{
'ititle':'标题1',
'icontent':'这里是标题1的内容'
},
{
'ititle':'标题2',
'icontent':'这里是标题2的内容'
}
]
这段代码就是定义一个常量名为contens，他的内容就是一个json字符串。有了数据，那么我们想要将这段数据传递到其他组件去，那就很简单了，对就是使用props进行传递。
1、index.js代码（代码内有详细注释，我就不再做描述了）
import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
//因为这里引入的是Header组件，因此传递的数据就需要在Header中获取
import Header from './components/Header';
//定义相关data数据
const contents = [
{
'ititle':'标题1',
'icontent':'这里是标题1的内容'
},
{
'ititle':'标题2',
'icontent':'这里是标题2的内容'
}
]
// 此处的组件后面，必须使用data={contents}来定义将要传递的内容
ReactDOM.render(
2、Header.js代码
'use strict';
require('styles/App.css');
import React from 'react';
import Body from './Body';
import Foot from './Foot';
class Header extends React.Component{
render(){
return(
{/*要将index中传递过来的参数再次传递到其他组件，那么必须在相关组件后面添加data属性，如下*/}
);
}
}
export {Header as default}
下面就该到Body.js进行设置了，看到了吧，好像是一层层下去的传递。
3、Body.js代码(到这一步还没有完哦，我们还需要再新建一个组件来显示数据的)
'use strict';
import React from 'react';
// 引入另一个我们将要让他显示的组件，这里命名为Content
import Content from './Content';
class Body extends React.Component{
render(){
//在这里我们将数读出来，并且将其赋值给另一个组件
let contentNodes = this.props.data.map( item =>{
return(
/*既然我们上面导入了组件Content，那么我们就可以直接使用
)
});
return(
/*这里我们就可以直接显示我们所命名的contentNodes，因为contentNodes已经变成了Content组件了*/
);
}
}
export {Body as default}
4、关键的props显示组件Conten.js
'use strict';
import React from 'react';
class Content extends React.Component{
render(){
return(
{this.props.children}
);
}
}
export {Content as default}
这里为了方便演示，我直接使用了this.props.children来获取相关的数据。this.props.children表示组件的所有子节点。
5、最终效果
