实战 React ：组件编写 传值

    在React中，组件分为UI组件和容器组件。

    在实践中，比如说一个表单页面，包括查询条件，表格部分，我们可以将查询条件和表格展示部分作为UI组件，然后将它们在容器组件中组装到一起。示例：

    查询条件组件代码：

class Search extends React.Component {
  render() {
    return （
      <input/>
      <button>查询</button>
）
}
}

   表格组件代码也差不多，就是将得到的数据遍历到表格中：

class SearchTable extends React.Component {
  render() {
    return （
      {data && data.map(n => {
         return (
        <-- 表格体，就不详细写了 -->
        ......
)
})}
）
}
}

   组装后的代码

class Form extends React.Component {
  render() {
    return （
      <div>
        <Search />
        <SearchTable />
       </div>
 ）
}

写的代码比较简陋，大体上是这样。

涉及到数据的传递，遵循自上而下的原则，我们就在Form这个容器组件中进行数据的获取和传递，用的redux。比如说表单数据在后台拿到的是data，我们可以在Form这个容器组件中这样写

class Form extends React.Component {
  render() {
    return （
      <div>
        <Search />
        <SearchTable data={this.props.data} />
       </div>
 ）
}

this.props.data就是容器组件通过redux获取的数据，这样将它传递给子组件了，在子组件中获取：

const {data}= this.props;

子组件中的this.props和容器组件的是不一样的。只是在标签上定义了数据的传递，子组件才获取的data，不然无用。

交互和数据的传递差不多，比如说用户的点击动作，下拉动作等我们都可以在容器组件中定义一下触发的action，子组件调用这个方法就行了。

写的比较乱。。。