重新封装Link组件，目的是减少代码冗余
重新封装为自定义组件NavLink:

<NavLink activeClassName="navact" className="list-group-item" {...this.props}/>
**注意：**标签体内容也是一个特殊的标签属性，children
 
<NavLink to="/about">About</NavLink>
<NavLink to="/home">Home</NavLink>
一开始用react做项目的时候只知道react是组件化的，但是没有深入去理解为什么要封装组件，怎样去封装组件
上周在实际项目中自己尝试去封装了一个组件，最大的感受就是代码变得简洁了很多，本来要写三次类似代码现在只写一次就搞定了，不得不感概组件封装最实在的意义。
另一方面是可以提高我们编程的效率，代码复用性高了自然效率高了。
最后我觉得是提高思考的能力吧，换种更简单的方式去实...
        return <ul>{nav_li}</ul>
})createClass创建react组件对应的类，描述组件的各种行为，render函数是必须实现的，表示渲染什么内容下面来看我们的代码，接着前面封装导航栏组件 
nav.js
// 创建组件
var Na
UI类顾名思义就是能看得到的UI，这些组件一般就是按照需要渲染成相应的样子。
工具类是一类虽然看上去好像什么东西都不渲染，但是却需要写在render中作为组件加载才能使用。（无法通过传统对象或者类方法之类实现）
作为一个组件，...
一个封装组件提供 props 控制其行为而不是暴露其内部结构。
耦合是决定组件之间依赖程度的系统特性。根据组件的依赖程度，可区分两种耦合类型：
当应用程序组件对其他组件知之甚少或一无所知时，就会发生松耦合。
当应用程序组件知道彼此的许多详细信息时，就会发生紧耦合。
松耦合是我们设计应用结构和组件之间关系的目标。 松耦合应用(封装组件)
松耦合会带来以下好处：
可以在不影响应用其它部...
				
React组件概念想必大家都熟悉了，但是在业务开发过程中，面对通用的业务，怎么编写一个通用的React业务组件呢？本文以实际案例说明，如何编写一个通用的业务组件。
实现一个如图所示的组件，可以添加对组件进行添加和删除
实现组件的界面样式
实现组件的基本功能
考虑通用型和可扩展性
实现基本的界面样式
实现上面的界面展示，需要三个方面的东西
一个文本框
一个➖操作
一个➕操...
二、组件封装
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Row, Col, Modal, Input, Button, Divider, Card, Table, message } from 'antd';
import styles from './index.less';
const Search = Input.Search;
				
打算封装一套控件库来满足后台系统开发。 
比如调用封装的GoLayOut控件，import {GoLayout} from '../../components/goingComponent'其实这里访问的是： 
/components/goingComponent/index.js 
大概内容如下：var _goLayout = require('./goLayout');function _int
import React, {Component} from "react";
import {Form, Input, Button, Icon} from "antd";
export default class FormPage extends Component {
 constructor(props) {
   super(props);
   this.state =...
				
React封装组件的目的是为了提高代码复用性和可维护性，使得代码更易读易懂。一个常见的做法是使用函数组件或类组件来封装，同时传入props作为组件的参数，以便组件可以接收不同的数据和行为。
以下是一个简单的示例，其中封装了一个可以显示标题和内容的组件：
```jsx
import React from 'react';
function Card(props) {
  return (
    <div className="card">
      <h2>{props.title}</h2>
      <p>{props.content}</p>
export default Card;
这个组件接收两个props： `title` 和 `content`， 分别用于显示标题和内容。在使用这个组件的时候，只需要传入相应的props即可：
```jsx
import React from 'react';
import Card from './Card';
function App() {
  return (
    <div className="App">
      <Card title="Hello" content="World!" />
export default App;
这样，我们就可以在应用中重复使用这个组件，同时也可以方便地修改和维护它。