07-函数组件的数据

weixin_45969726

已于 2022-06-18 09:33:08 修改

阅读量235

点赞数 1

文章标签： javascript react.js 前端

于 2022-05-31 20:56:48 首次发布

本文链接：https://blog.csdn.net/weixin_45969726/article/details/125072698

版权

函数组件的数据

一、相关知识点

1.组件的特征

它不能声明自己的私有数据，私有数据需要使用类组件
它可以通过形参props,负责接收从外部传给当前组件的数据

使用场景：

一般用函数组件封装静态组件（没有动态数据），不需要私有数据，比如：导航条，footer,侧边导航

2.数据传递

直接在根元素调用用组件的地方以属性的方式写入数据如下图

在这里插入图片描述

在组件定义的地方接收数据如下图
在这里插入图片描述

二、注意事项

在数据传递时，属性称为prop属性，和html规范里的自定义属性不一样
在这个案例中称为根组件
使用方法二进行数据传递时，要根据情况进行选择，获取对象的属性值有两种方法，但是 obj.属性名使用时，属性名不能有分开的情况。

在这里插入图片描述

三、代码示例

1.引入React和babel

<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

2.HTML 结构

<div id="main"></div>

3.配置JS 类型

<script type="text/babel"></script>

4.JS 详细代码

function NavCom(props) {
        console.log(props);
        // 将内容解构出来
        const { title, desc } = props;
        return (
          <div className="nav">
            {title}:{desc}
          </div>
        );
      }
function ContentCom(props) {
        console.log(props);
        return <div className="content">{props['content-title']}:{[props['contentDesc']]}</div>;
      }function FooterCom(props) {
        return <div className="footer">{props.title}</div>;
      }
function RootCom(props) {
        return (
          <div className="container">
            {/* 这里的title和desc，称为prop属性，和html规范里的自定义属性不一样 */}
            <NavCom title="导航条" desc="这是一个公共导航"></NavCom>
            <ContentCom content-title="主要内容区域" contentDesc="主要内容区域组件ContentCom"></ContentCom>
            <FooterCom title="这是底部Footer"></FooterCom>
          </div>
        );
      }

      //   <RootCom></RootCom> 根组件
      ReactDOM.render(<RootCom></RootCom>, document.getElementById("main"));