React抽离组件命名

最新推荐文章于 2024-04-24 19:47:22 发布
最新推荐文章于 2024-04-24 19:47:22 发布
阅读量270 收藏
点赞数
分类专栏： React 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Excalibur_C/article/details/104784249
版权

React 中我们抽离组件出来的时候，比如 一个 Header 组件，将其放在 src/components/ 下
我们可以这么写：
在这里插入图片描述
Header 文件夹中即是 Header 组件的所有内容，这里的一个小技巧就是，将 jsx文件或者js文件命名为
index.jsx ，这样的好处一是目录看起来更清晰一些，二是我们在引用组件的时候，只需要将路径写到
Header 文件夹就可以，这样会自动找到它下面的 index 文件

import Header from './components/Header'
Excalibur_C
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
React学习第二天（创建组件的方式,ES6 扩展运算符使用,抽离 jsx 组件,评论列表案例,省略 jsx 后缀名,使用@别名表示路径）
周琛的点滴记录~
05-12 703
React学习第二天 React学习第二天 创建组件的方式（ function 和 class） ES6 扩展运算符使用 抽离 jsx 组件 如何省略 jsx 后缀名？ 使用@别名表示路径 两种创建组件方式的对比 评论列表案例 没有收拾残局的能力，就别放纵善变的情绪！！！ 创建组件 第一种创建组件的方式 //第一步：导入包 import React from 'react' //创建组件，虚拟...
实例讲解React 组件
10-15
React组件的命名遵循一定的规则：自定义组件名应以大写字母开头，如`HelloMessage`，而原生HTML元素则以小写字母开头，如`div`。这是因为React区分组件和DOM元素，避免与JavaScript的保留关键字冲突。 ### 复合组件...
「译」React 项目结构和组件命名之道
weixin_34281477的博客
10-21 309
原文地址：structuring projects and naming components in react 原文作者：Vinicius Dacal 译文出自：阿里云翻译小组 译文链接：github.com/dawn-teams/… 译者：也树 React 项目结构和组件命名之道 React 作为一个库，不会决定你如何组织项目的结构。这是件好事，因为这样我们有了充分的自由去尝试不同的组...
react项目，文件夹和组件命名，有什么好的规范
最新发布
solocao的专栏
04-24 394
在React项目中，文件夹和组件的命名规范对于保持代码的可读性和可维护性至关重要。
react
qq_45102392的博客
04-23 1928
jsx语法 1. React元素的属性名使用驼峰命名法 2.特殊属性名: class -> className、for -> htmlFor、tabindex -> tablndex。 3.没有子节点的React元素可以用/>结束。 4.推荐:使用小括号包裹JSX ,从而避免JS中的自动插入分号陷阱。 ...
react组件书写规范
徐同保的专栏
10-10 1153
组件的私有方法都用 _ 开头，所有事件监听的方法都用 handle 开头。把事件监听方法传给组件的时候，属性名用 on 开头 组件的内容编写顺序如下： static 开头的类属性，如 defaultProps、propTypes。 构造函数，constructor。 getter/setter（还不了解的同学可以暂时忽略）。 组件生命周期。 _ 开头的私有方法。 事件监听方法，han...
React学习笔记之四---抽离组件
weixin_47619269的博客
08-09 784
一个复杂的应用都是由简单的应用发展而来的。随着越来越多的功能加入项目，代码会变得越来越难以控制，本文主要探讨在大型项目中如何对组件进行组织，让项目具备可维护性。 组件设计的基本原则 基本原则 单一职责 这原本来源u面向对象编程，规范定义是“一个类应该只有一个发生变化的原因”，说的简单通俗一点就是：一个类只负责一件事情。不管是什么编程范式，只要是模块化的程序设计都使用单一职责原则，在React中，组件就是模块。 单一职责要求将组件限制在一个合适的粒度，这个粒度是比较主观的概念，换句话说’单一’是一个相对的概
移动端 React 组件库
04-15
本篇文章将深入探讨“移动端 React 组件库”，特别是针对京东风格的轻量级移动端 React 组件库——NutUI React Next。 首先，让我们了解什么是React组件。React 是一个用于构建用户界面的JavaScript库，它的核心...
React创建组件的三种方式及其区别
08-31
在React中，组件是构建应用程序的基本单元，可以通过三种方式创建。以下是这三种方式的详细介绍及其差异： 1. **无状态函数式组件** 无状态函数式组件是自React 0.14版本开始引入的，主要用于创建纯展示组件，它们...
React滚动组件-React开发
05-27
安装$ npm install react-scroll运行$ npm install $ npm test $ npm start示例检出示例实时示例用于对垂直滚动进行动画处理的基本React Scroll组件。 安装$ npm install react-scroll运行$ npm install $ npm test ...
react 兄弟组件如何调用对方的方法示例
10-17
主要介绍了react 兄弟组件如何调用对方的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React 项目结构和组件命名之道
前端大全
11-17 662
（给前端大全加星标，提升前端技能）英文：Vinicius Dacal  译文：也树github.com/dawn-plex/translate/blob/master/a...
React 组件抽离（key-value）,高效基础展示
ly18314524152的博客
04-29 896
组件抽离 组件抽离的目的 提高代码开发效率，减少重复代码输出 原则 1、数据驱动 组件提取，必须是由数据来控制组件的表现形式，否则就失去了组件的通用性。 2、可扩展 一个成功的组件，首先需要满足基础的使用，其次需要接受自定义样式和内容。 当你理解到抽离组件的两大原则，此时，你已经可以独立进行组件抽离。 接下来，以key-value基础展示为例子，抽离组件。 import React, { useEffect, useState, useRef } from 'react'; import { isEmpty
react组件抽离为独立的js文件
qq_41792374的博客
10-11 419
react组件开发
qq_42275455的博客
04-26 252
组件名----必须首字母大写！！！
React 编程规范
忘川
11-23 1915
一、命名规范 1、通用命名方法 命名方法 举例 Camel命名法 thisIsAnApple Pascal命名法 ThisIsAnApple 注意：在命名时尽量简洁明了，用英文表达（绝对不能用拼音或者首字母拼写） 2、各类型命名规范 名称 命名方法 词汇种类 说明 举例 局部变量名 Camel命名法 名词 fristName 全局变量名 Camel命名法 名词 前缀:g gFristNa.
注意，react声明组件时，第一个字母必须大写。
Summersblue的博客
02-02 5619
注意，react声明组件时，第一个字母必须大写。 当JSX包含多行代码时，将它们包含在小括号中。/// bad render() { return <MyComponent className="long body" foo="bar"> <MyChild /> </MyComponent>; }// good render() { return (
React: 定义组件名称要以大写字母开头
amadeus_liu2的博客
09-15 490
定义组件名称要以大写字母开头
react 类抽离组件
07-28
在 React 中，可以使用类抽离组件来将重复的逻辑和 UI 抽离出来，以便在多个地方重复使用。下面是一个示例： 首先，创建一个类组件，可以称为 `MyComponent`： ```jsx import React from 'react'; class MyComponent extends React.Component { render() { return ( <div> {/* 组件的 UI */} </div> ); } } export default MyComponent; ``` 然后，在需要使用这个组件的地方，可以通过导入并渲染 `MyComponent`： ```jsx import React from 'react'; import MyComponent from './MyComponent'; function App() { return ( <div> <h1>My App</h1> <MyComponent /> </div> ); } export default App; ``` 这样，`MyComponent` 组件就可以在 `App` 组件中使用了。你可以在其他地方也引入并使用它。 注意，类组件还可以接收属性（props）作为参数，以便根据不同的属性值来渲染不同的内容。你可以在 `MyComponent` 类组件中通过 `this.props` 来获取传递的属性值。例如： ```jsx import React from 'react'; class MyComponent extends React.Component { render() { const { name } = this.props; return ( <div> <h2>Hello, {name}!</h2> </div> ); } } export default MyComponent; ``` 然后，在使用 `MyComponent` 组件时，可以通过属性传递 `name` 的值： ```jsx <MyComponent name="John" /> ``` 这样，`MyComponent` 组件就会显示 "Hello, John!"。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值