react移动端组件开发笔记

开始学习react时是从amaze UI的react部分学起的，后来根据项目需要，师傅决定让我们自己写组件，并弄出一个供学习的代码，知识点包括HTML、SCSS、react、redux、router。其中redux最难，学了一个多星期才基本理解，然而，离写代码还是有很长一段路。项目开始后，我写了一个登陆页面，今天写了一个导航条组件，记录一下。
一个可以扩展的组件怎么写？
首先，我们写好一个写死的组件。
然后，你希望不同页面的某个地方能展示不同的内容。这时你就可以在父组件导入组件后定义变量，父组件里用到这个组件时，给这个组件一个与内容相关的属性，属性值等于变量。父组件的事就完了。再下来是该组件。在该组件render内return前通过this.props获得定义的变量内容，再把this.props。。。的值写到这个某个地方！这样就好了。
代码！

//父组件

import React from "react";import NavBar from "../components/navBar.js";const Data = {title:'标题',name:'某某'};export default class Login extends React.Component {  render(){    return(      <div>          <NavBar {...Data}></NavBar>        //<NavBar title="标题"></NavBar>可以这样写         。。。      </div>    )  }}//该组件import React from "react";export default class NavBar extends React.Component{  render(){      const {title} = this.props;   // const title = this.props.title;    return(      <div className="navBar">        <div className="navBar-left">          <a href="/">返回</a>        </div>        <div className="title">{title}</div>        <div className="navBar-right">          <a href="/">下一步</a>        </div>      </div>    )  }}

我遇到的问题是：props在组件外获取，导致this是undefined（Uncaught TypeError: Cannot read property ‘props’ of undefined）。
有时候理解是比较容易的，但动起手来却是另外一回事，你觉得自己理解就差不多时，实践起来常常遇到觉得困难的问题。而这个导航条是一个很简单的组件。