[项目实战，源码完整]手把手教你怎么封装组件，React 重写学成在线 III_react 函数组件如何重写(2)

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

• 最左的标题，必须

这里命名为 subHeaderName

• 中间的选取，可选

这里命名为 midConent

• 右侧的查看更多，可选

这里命名为 checkMore，指查看更多

代码实现：

import React from 'react';

const SubHeader = (props) => {
  const { subHeaderName, midConent, checkMore } = props;

  return (
    <div className="flex space-between">
      <div>{subHeaderName}</div>
      <div>{midConent.map((val) => val)}</div>
      <div>{checkMore}</div>
    </div>
  );
};

export default SubHeader;

什么是 props

这里的 props 是用来接收父组件传来的数据的，在上一期轮播图中讲了父组件如何向子组件传递数据，这里讲的就是子组件如何从父组件中接收数据。

父组件向子组件传递数据的方法：

const settings = {
  data: 'test',
}

<Child {...settings} />

父组件传到子组件的这些属性最终会被 React 压缩到一个对象中，约定俗成的这个对象叫做 props，这也是上文使用的。

从 props 中获取数据的方法也很简单，就像从一般的对象中获取属性一样，直接使用 props.data，或者像上文一样解构数据都可以获得：

// using props directly
alert(props.data);

// using object destruct
const { data } = props;
alert(data);

尝试渲染

加上一点点 CSS 后，做一个测试数据来看看渲染效果吧。

先从父组件中传递一些假数据进去：

const Home = () => {
  return (
    // 省略其他
    <div className="homepage-main">
      <SubHeader
        subHeaderName="编程入门"
        midConent={[123]}
        checkMore={'true'}
      />
    </div>
  );
};

看起来效果还不错，现在需要设计的就是传进去的数据类型了。

设计数据类型

已知 sub header 会接受 3 个数据类型：subHeaderName, midConent, 和 checkMore。

• subHeaderName 是一个纯字符串，这个也是最简单的。
• midConent 最终的决定是由一个由 对象 组成的数组：

[
  { title: '热门', url: '/#' },
  { title: '初级', url: '/#' },