Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

跟我一起学习React(二):props

Posted on 2017年3月23日2017年3月23日 by king2088

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(

, document.getElementById('app'));

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(

This is Header

{/*要将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,那么我们就可以直接使用这样的标签进行传递参数了。这样就有点相当于DOM操作中的遍历*/
{item.ititle}-{item.icontent}
)
});
return(
/*这里我们就可以直接显示我们所命名的contentNodes,因为contentNodes已经变成了Content组件了*/

{contentNodes}

);
}
}
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、最终效果

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 4月
一 二 三 四 五 六 日
 12
3456789
10111213141516
17181920212223
24252627282930
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme