React函数式组件props的使用(六)

简介: 【8月更文挑战第14天】React函数式组件props的使用(六)

在类组件中,使用props的一个完整示例如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello_react</title>
  </head>
  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作DOM -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <!-- 引入组件标签类型声明文件 -->
    <script type="text/javascript" src="./js/prop-types.js"></script>
    <script type="text/babel">
      // 1、创建类组件
      class MyComponent extends React.Component {
   
   
        // 对标签属性进行类型。必要性的限制
        static propTypes = {
   
   
          name: PropTypes.string.isRequired, // 限制name必传,且为字符串
          sex: PropTypes.string, // 限制sex为字符串
          age: PropTypes.number, // 限制age为数值
          speak: PropTypes.func, // 限制speak为函数(注意,不能写成function)
        };
        // 对标签默认值进行设置
        static defaultProps = {
   
   
          sex: "男",
          age: 18,
        };
        render() {
   
   
          const {
   
    name, age, sex } = this.props;
          return (
            <ul>
              <li>姓名:{
   
   name}</li>
              <li>年龄:{
   
   age}</li>
              <li>性别:{
   
   sex}</li>
            </ul>
          );
        }
      }
      // 渲染组件
      const info = {
   
    name: "小明" };
      ReactDOM.render(<MyComponent {
   
   ...info} />, document.getElementById("test"));
    </script>
  </body>
</html>

函数式组件的结构和类组件的结构完全不同,那么函数式组件中如何使用?

函数式组件props的写法

当组件是一个函数时,其参数可以接受到props,我们看看示例

<script type="text/babel">
  function MyComponent(props) {
   
   
    console.log("props: ", props);
    return (
      <ul>
        <li>姓名:??</li>
        <li>年龄:??</li>
        <li>性别:??</li>
      </ul>
    );
  }
  // 渲染组件
  const info = {
   
    name: "小明", age: 18, sex: "女" };
  ReactDOM.render(<MyComponent {
   
   ...info} />, document.getElementById("test"));
</script>

可以看到,函数的参数props(形参)可以接受到通过标签传递的所有参数
image.png
那么,函数式组件使用props也就非常容易了

<script type="text/babel">
  function MyComponent(props) {
   
   
    console.log("props: ", props);
    return (
      <ul>
        <li>姓名:{
   
   props.name}</li>
        <li>年龄:{
   
   props.age}</li>
        <li>性别:{
   
   props.sex}</li>
      </ul>
    );
  }
  // 渲染组件
  const info = {
   
    name: "小明", age: 18, sex: "女" };
  ReactDOM.render(<MyComponent {
   
   ...info} />, document.getElementById("test"));
</script>

页面效果:
image.png

函数式组件如何限定props类型

限定函数式组件的props类型也非常容易

  • 对标签属性进行类型,我们给函数添加propTypes方法即可

    MyComponent.propTypes = {
         
          /一些限制代码/ }
    
  • 对标签默认值进行设置我们给函数添加 defaultProps方法即可

    MyComponent.defaultProps = {
         
          /一些默认值设置/ }
    

    一个比较完整的代码如下

    <script type="text/babel">
    function MyComponent(props) {
         
         
      return (
        <ul>
          <li>姓名:{
         
         props.name}</li>
          <li>年龄:{
         
         props.age}</li>
          <li>性别:{
         
         props.sex}</li>
        </ul>
      );
    }
    // 对标签属性进行类型。必要性的限制
    MyComponent.propTypes = {
         
         
      name: PropTypes.string.isRequired, // 限制name必传,且为字符串
      sex: PropTypes.string, // 限制sex为字符串
      age: PropTypes.number, // 限制age为数值
    };
    // 对标签默认值进行设置
    MyComponent.defaultProps = {
         
         
      sex: "男",
      age: 18,
    };
    // 渲染组件
    const info = {
         
          name: "小明", age: 18, sex: "女" };
    ReactDOM.render(<MyComponent {
         
         ...info} />, document.getElementById("test"));
    </script>
    

    我们验证下

    标签属性类型验证

    // 对标签属性进行类型。必要性的限制
    MyComponent.propTypes = {
         
         
      name: PropTypes.string.isRequired, // 限制name必传,且为字符串
      sex: PropTypes.string, // 限制sex为字符串
      age: PropTypes.number, // 限制age为数值
    };
    // 渲染组件
    const info = {
         
          name: "小明", age: "18", sex: "女" };
    

    上述代码中,我们定义了age的类型为数字,但是实际上我们传递了字符18,打开控制台,我们可以看到类型错误的一个报错,说明类型限制生效了
    image.png

    默认值设置

    // 对标签默认值进行设置
    MyComponent.defaultProps = {
         
         
      sex: "男",
      age: 18,
    };
    // 渲染组件
    const info = {
         
          name: "小明"};
    

    上述代码中,我们sex和age的默认值进行了设置,但给标签只传递了name属性,观察页面,我们可以看到sex和age也展示了,这说明默认值的设置也生效了。
    image.png

相关文章
|
12天前
|
前端开发 JavaScript 网络架构
react对antd中Select组件二次封装
本文介绍了如何在React中对Ant Design(antd)的Select组件进行二次封装,包括创建MSelect组件、定义默认属性、渲染Select组件,并展示了如何使用Less进行样式定义和如何在项目中使用封装后的Select组件。
33 2
react对antd中Select组件二次封装
|
12天前
|
前端开发 JavaScript
React_函数式Hooks和Class比较优缺点
React Hooks与Class组件都能返回JSX并接收props,但Hooks无`this`指向问题,用`useEffect`模拟生命周期,`memo`优化性能,状态更新用`useState`;Class组件通过生命周期方法、`PureComponent`或`shouldComponentUpdate`优化,状态用`this.state`和`this.setState`管理。
24 1
React_函数式Hooks和Class比较优缺点
|
12天前
|
前端开发 JavaScript
React中函数式Hooks之useRef的使用
React中函数式Hooks的useRef用于获取DOM元素的引用,示例代码演示了其基本用法。
28 3
|
12天前
|
前端开发
React中函数式Hooks之useEffect的使用
本文通过示例代码讲解了React中`useEffect` Hook的用法,包括模拟生命周期、监听状态和清理资源。
26 2
React中函数式Hooks之useEffect的使用
|
12天前
|
前端开发
React给antd中TreeSelect组件左侧加自定义图标icon
本文介绍了如何在React中为Ant Design的TreeSelect组件的每个树节点添加自定义图标,并解决了因缺少key属性而导致的警告问题,展示了如何通过递归函数处理treeData数据并为每个节点添加图标。
23 2
React给antd中TreeSelect组件左侧加自定义图标icon
|
12天前
|
前端开发
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
本文介绍了在React项目中如何添加路径别名alias以简化模块引入路径,设置组件props的默认值,以及如何二次封装Ant Design的Modal组件。文章还提供了具体的代码示例,包括配置Webpack的alias、设置defaultProps以及封装Modal组件的步骤和方法。
29 1
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
|
8天前
|
前端开发 JavaScript 区块链
react18函数组件+antd使用指南-使用代码集合以及报错记录汇总
本文介绍了多个React开发中常见的问题及其解决方案,包括但不限于:1)`useForm`实例未连接到任何`Form`元素的警告及解决方法;2)监听页面滚动事件的实现方式;3)React 18与antd 5.8.6中定制主题的方法;4)React结合antd 4.x版本自定义主题色的步骤;5)解决`ResizeObserver loop`相关报错的技巧;6)处理React设计表单时遇到的CDN资源加载失败问题;7)解决onClick事件传参问题;8)修复类型错误等。每部分均提供详细分析与实用代码示例,帮助开发者快速定位并解决问题。
10 2
|
12天前
|
缓存 前端开发
React中函数式Hooks之memo、useCallback的使用以及useMemo、useCallback的区别
React中的`memo`是高阶组件,类似于类组件的`PureComponent`,用于避免不必要的渲染。`useCallback` Hook 用于缓存函数,避免在每次渲染时都创建新的函数实例。`memo`可以接收一个比较函数作为第二个参数,以确定是否需要重新渲染组件。`useMemo`用于缓存计算结果,避免重复计算。两者都可以用来优化性能,但适用场景不同:`memo`用于组件,`useMemo`和`useCallback`用于值和函数的缓存。
35 1
|
12天前
|
前端开发
React中函数式Hooks之useState的使用
本文介绍了React中函数式组件的Hooks——`useState`的使用方法。`useState`允许在函数式组件中使用状态,它返回一个数组,其中包含当前状态的值和更新该状态的函数。文章通过示例代码展示了如何声明状态变量和更新状态变量,包括对数值和对象状态的更新。此外,还展示了如何通过点击按钮触发状态更新,实现交互功能。
24 1
|
11天前
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等
文章介绍了如何封装React-Antd的Table组件,包括参数和方法,如行选择(rowSelection)、页码(pageNum)、页面大小(pageSize)、分页方法等,以简化在不同表格组件中的重复代码。
38 0

热门文章

最新文章

下一篇
无影云桌面