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

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(<Header data={contents} />, 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(
      <div className="main">
      <header>
        <div className="top">This is Header</div>
      </header>
        {/*要将index中传递过来的参数再次传递到其他组件,那么必须在相关组件后面添加data属性,如下*/}
        <Body data={this.props.data}/>
        <Foot/>
      </div>
    );
  }
}
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,那么我们就可以直接使用<Content>这样的标签进行传递参数了。这样就有点相当于DOM操作中的遍历*/
        <Content>{item.ititle}-{item.icontent}</Content>
      )
    });
    return(
      /*这里我们就可以直接显示我们所命名的contentNodes,因为contentNodes已经变成了Content组件了*/
      <div id="isbody">{contentNodes}</div>
    );
  }
}
export {Body as default}

4、关键的props显示组件Conten.js

'use strict';
import React from 'react';

class Content extends React.Component{
  render(){
    return(
      <div className="content">
        <p className="text">{this.props.children}</p>
      </div>
    );
  }
}
export {Content as default}

这里为了方便演示,我直接使用了this.props.children来获取相关的数据。this.props.children表示组件的所有子节点。

5、最终效果

发表评论

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