开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

React组件名称，如BEM

React是一个流行的JavaScript库，用于构建用户界面。它采用组件化的开发方式，将界面拆分成独立的可复用组件。在React中，组件名称通常遵循一定的命名规范，如BEM（Block Element Modifier）。

BEM是一种命名约定，用于标识和描述React组件的结构和样式。它由三个部分组成：块（Block）、元素（Element）和修饰符（Modifier）。

块（Block）：块是一个独立的、可复用的组件，代表一个完整的功能或模块。块的命名应该简洁、清晰，并且具有描述性。例如，一个导航栏组件可以命名为"Navbar"。
元素（Element）：元素是块的组成部分，不能独立存在。元素的命名应该以块名为前缀，用双下划线"__"与块名分隔。例如，导航栏中的链接可以命名为"Navbar__Link"。
修饰符（Modifier）：修饰符用于描述块或元素的不同状态或变体。修饰符的命名应该以块或元素名为前缀，用单下划线"_"与修饰符名分隔。例如，导航栏的选中状态可以使用修饰符"Navbar_selected"。

BEM命名规范的优势在于提供了一种一致且可读性强的命名方式，使得组件的结构和样式更易于理解和维护。同时，它也能够有效地避免命名冲突和样式污染的问题。

在React开发中，可以使用BEM命名规范来命名组件及其相关样式类，以提高代码的可读性和可维护性。

腾讯云相关产品和产品介绍链接地址：

腾讯云服务器（CVM）：提供弹性计算能力，支持多种操作系统和应用场景。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：提供安全、稳定、低成本的云存储服务，适用于图片、视频、文档等各种类型的数据存储。详情请参考：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：提供全面的物联网解决方案，帮助用户快速构建和管理物联网设备。详情请参考：https://cloud.tencent.com/product/iot
腾讯云区块链（BCBaaS）：提供安全、高效的区块链服务，支持快速搭建和管理区块链网络。详情请参考：https://cloud.tencent.com/product/baas

相关搜索:如何在React组件中使用BEM手写笔？React:通过组件的名称加载组件高位组件中的React组件名称 React访问父组件名称未创建动态名称react组件工厂中的React组件名称呈现组件，如HTML React build删除组件类的名称在属性中显示react组件名称 React -如何返回具有动态名称的组件？React Profiler -备注组件的固有名称在React Router中按名称调用组件在React中按名称呈现动态组件 DevTools中带有React挂钩的组件名称 React eslint错误:组件定义缺少显示名称如何在React函数组件中获取父组件名称使用React测试库按组件名称进行测试获取React组件名称的最佳方法是什么？如何使用react功能组件动态设置属性名称组件定义缺少显示名称react/ display -name错误

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

组件库使用BEM

bem的优势最近在开发一个组件库，选择了BEM作为css的组织形式，主要考虑了以下三个方面的优势：逻辑分层，容易理解。...BEM基于block、element、modify的组织形式，基本与组件的组织形式吻合。只要遵循了BEM的命名方式，对于开发和修改组件，哪些元素和状态已经存在，都可以直观的看出来。...反过来，通过html标记的BEM命名，可以直观地理解组件的功能和依赖关系。强约束，便于团队协作。...只要定义好了大的框架和命名，那么团队其他成员基于BEM的规范进行开发，理解成本降低，而且基本不存在样式冲突的问题。...预编译器支持目前常用的css预编译器，如sass、less、stylus，基本对BEM的支持都很好，举个例子(语法差异暂时忽略)： .block { &__element { }

5093 0

React - 组件：类组件

类组件有自己的状态 2. 继承React.Component-会有生命周期和this 3....类组件注意：注意绑定事件时，"on"后边事件名的首字母大写，如"change"要写成"Change"注意回调函数内部this的指向默认为undefined，要改变this指向不能直接改变state...要点： • 类的名字就是组件的名字 • 类的开头一定要大写 • 类要继承自React.Component • 组件内部一定要有render函数，否则报错定义一个组件： 1 import React...from 'react' 2 3 class TodoList extends React.Component { 4 render(){ 5 let todoList...注意"on"后边事件名的首字母大写，如"change"要写成"Change" ? === ?

1.9K2 0

React 组件

的组件，组件名为 HelloMessage： React 实例 function HelloMessage(props) { return Hello World!...; } 你也可以使用 ES6 class 来定义一个组件: class Welcome extends React.Component { render() { return <h1...注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。...除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。...如果我们需要向组件传递参数，可以使用 this.props 对象,实例如下： React 实例 function HelloMessage(props) { return Hello {

7524 0

React-组件-非受控组件和 React-组件-高阶组件

前言图片非受控组件也就是值，不受到 React 控制的表单元素就是非受控组件废话不多说直接上代码：import React from 'react';class App extends React.PureComponent...{ constructor(props) { super(props); this.myRef = React.createRef(); } render...this.myRef.current.value); }}export default App;官方文档https://zh-hans.reactjs.org/docs/uncontrolled-components.html高阶组件...(Higher-Order Components，简称为 HOC)参数为组件，返回值为新组件的函数就可以称之为高阶组件import React from 'react';class Home extends...React.PureComponent { render() { return ( Home ) }}function

1883 0

react 纯函数组件_react类组件

函数组件函数组件只有当展示视图的时候才用。做复杂的数据处理、需要有自己的状态的时候，需要用类组件。函数组件的缺点：无状态组件函数组件只能实现非常简单的渲染功能。...父组件调用pure import React, { Component } from 'react'; import Pure from '....> 这里是父组件 ) } } 纯函数组件pure.jsx import React from 'react'; function Pure (props) { console.log...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

1.6K3 0

CSS — BEM 命名规范

如： .sub-block__element {} .sub-block--modifier {} 1.2 BEM 命名法的好处 BEM的关键是，可以获得更多的描述和更加清晰的结构，从其名字可以知道某个标记的含义...BEM 格式在当前流行的 Vue.js / React / Angular 等前端框架中，都有 CSS 组件级作用域的编译实现，其基本原理均为利用 CSS 属性选择器特性，为不同的组件生成不同的属性选择器...当你选择了这种局部作用域的写法时，在较小的组件中，BEM 格式可能显得没那么重要。但对于公共的、全局性的模块样式定义，还是推荐使用 BEM 格式。...另外，对于对外发布的公共组件来说，一般为了风格的可定制性，都不会使用这种局部作用域方式来定义组件样式。此时使用 BEM 格式也会大显其彩。...2.4 避免 .block__el1__el2 的格式在深层次嵌套的 DOM 结构下，应避免过长的样式名称定义。

2.7K3 1

React学习笔记—React组件

2、类定义/函数定义组件类定义组件：使用ES6 class 来定义一个组件: import React, { Component } from 'react'; class Title extends...组件，它接收一个单一的“props”对象并返回了一个React元素。...补充：在React出现之初，使用的是React.createClass方式来创造组件类，这种方式已经被废弃了。...3、React组件的数据 React组件的数据分为两种，props和state，无论props或者state的改变，都可能已发组件的重新渲染。...React的props：在React中，props是从外部传递给组件的数据，一个React组件通过定义自己能够接受的props就定义了自己的对外公共接口。

9714 0

React - 组件：函数组件

组件名字首字母一定是大写的 2. 返回一个jsx 3. jsx依赖React，所以组件内部需要引入React 4. 组件传参 a. 传递....缺点：【无状态组件】只能实现很简单的视图展示功能，没有自己的内容数据、没有状态，没有逻辑处理，【没有this】，【没有生命周期】。 6. 16.7以后版本的react有状态和钩子函数提供使用。...也可以直接调用函数，实现函数组件引用。 ? 函数组件里可以返回一个字符串： ? 但是没有返回值就会报错： ? 组件之间写内容不会展示出来： ? 组件身上写className没用： ?...渲染的结果如下：没有组件中的内容，也没有class类名 ? 独立写在js里的函数组件：必须引入React才能使用、导出函数本身。代码如下 ? 组件传参：传入 - 属性传参 ?...函数组件的缺点：无状态组件函数组件只能实现非常简单的渲染功能。只是进行页面的展示和数据的渲染。没有逻辑的处理。也就是组件的内部是没有自己的数据和状态的。它是无状态组件。

1.8K3 0

React之组件

项目开发组件化已经是目前前端主流技术的一个发展方向了。当你在学习一个新的框架时，组件必是其最基础，也是其最重要的一部分。本篇文章主要介绍React当中的组件如何编写！...React组件你可以把它看作是一个带有props属性集合和state状态集合并且构造出一个虚拟DOM结构的对象。创建组件首先我们通过函数来创建一个组件，函数的名字即是组件的名字！...> 另外我们也可以通过ES6当中的class来定义组件： //类名即为组件名，该类需要继承React.Component class MyComponent extends React.Component...，该类需要继承React.Component class MyComponent extends React.Component { //render的返回内容即是组件的内容...例如： //子组件 function SiteName(props) { return 网站名称：{props.name

6862 0

React 组件基础

1、React 组件的两种创建方式 React 组件有两种创建方式，函数组件和类组件。 1.1 使用函数创建组件使用函数创建组件前，我们要知道一些创建的规则。...组件的名称必须首字母大写，react内部会根据这个来判断是组件还是普通的HTML标签。函数组件必须有返回值，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null。...组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数的返回值就是对应的内容。使用函数名称作为组件标签名称，可以成对出现也可以自闭合。...代码演示：效果： 1.2 使用类创建组件创建规则：类名称也必须以大写字母开头。类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或属性。...语法：on+事件名称={事件处理程序}，比如：onClick={() => {}} 注意：React 事件采用驼峰命名法，比如：onMouseEnter、onFocus 示例： Hello.js app.js

1.3K3 0

React 组件通讯

目录 1、组件通讯的三种方式 1.1 父子关系 1.2 兄弟关系 1.3 跨组件通信Context 2、组件的 props ---- 组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。...在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。...子组件中通过 props 接收父组件中传过来的数据：类组件使用this.props获取props对象函数式组件直接通过参数获取props对象然后我们来看看效果。...狗头 2、子传父父组件：函数子组件：类子组件： 1.2 兄弟关系如何实现子组件之间通信？核心思路：子组件将消息传给一个公共的父组件，再由父组件传给另外一个子组件。...这样我们就实现了跨组件通讯，就不需要一个一个往下传递了。 2、组件的 props 组件是封闭的，要接收外部数据应该通过 props 来实现。 props的作用：接收传递给组件的数据。

1.1K0 0

【React】组件&事件

React(二) 创建组件函数组件函数组件：使用JS的函数或者箭头函数创建的组件使用 JS 的函数(或箭头函数)创建的组件，叫做函数组件约定1：函数名称必须以大写字母开头，React 据此区分组件和普通的...（class）组件约定1：类名称也必须以大写字母开头约定2：类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性约定3：类组件必须提供 render 方法约定4：...导包 import React from "react" import ReactDom from 'react-dom/client' // 函数组件没有状态仅仅做一些数据展示的工作，可以使用函数组件...导包 import React from "react" import ReactDom from 'react-dom/client' // 类组件有状态如果有状态，状态需要切换，更新视图用类组件...导包 import React from "react" import ReactDom from 'react-dom/client' // 类组件有状态如果有状态，状态需要切换，更新视图用类组件

9185 0

React组件详解

3.6.1 React组件简介众所周知，组件作为React的核心内容，是View的重要组成部分，每一个View页面都由一个或多个组件构成，可以说组件是React应用程序的基石。...在React的组件构成中，按照状态来分可以分为有状态组件和无状态组件。...目前，React支持三种方式来定义一个组件，分别是： - ES5的React.createClass方式； - ES6的React.Component方式； - 无状态的函数组件方式。...在ES6出现之前，React使用React.createClass方式来创建一个组件类，它接受一个对象作为参数，对象中必须声明一个render方法，render函数返回一个组件实例。...无状态组件是React在0.14版本推出的一种新的组件形式，它是一种只负责展示的纯组件。

1.5K2 0

React 组件 API

React 组件 API。...当和一个外部的JavaScript应用集成时，我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染，可以使用setProps()。...更新组件，我可以在节点上再次调用React.render()，也可以通过setProps()方法改变组件属性，触发组件重新渲染。...forceUpdate()方法适用于this.props和this.state之外的组件重绘（如：修改了this.state后），通过该方法通知React需要调用render() 一般来说，应该尽量避免使用...从DOM 中读取值的时候，该方法很有用，如：获取表单字段的值和做一些 DOM 操作。

1.4K3 0

React组件复用

对于组件中的方法和数据的来源不明确，不容易维护 Mixins 导致名称冲突 Mixins 导致滚雪球般的复杂性 render-props技术组件复用的说明思考：如果两个组件中的部分功能相似或相同...操作state的方法复用组件的状态和组件的逻辑，组件的UI不一样两种解决方案 render-props HOC（高阶组件）注意：这两种方式不是新的API，而是利用React自身特点的编码技巧...传进来的函数负责渲染UI 问题2：如果获取组件内部的状态在组件内部调用方法的时候，把状态当成参数进行传递 class Mouse extends React.Component {...{mouse.x}，{mouse.y} )}/> children代替render属性注意：并不是该模式叫 render props 就必须使用名为render的prop，实际上可以使用任意名称的....this.state} /> } } return Mouse } 使用步骤创建一个函数，名称约定以 with 开头指定函数参数（作为要增强的组件）传入的组件只能渲染基本的

1.3K6 0

React组件通讯

extends React.Component { getChildMsg = (msg) => { console.log('接收到子组件数据', msg) }... ) } } 子组件接收函数并且调用 class Child extends React.Component { state = { childMsg: 'React...处理方式：使用 props 一层层组件往下传递（繁琐）更好的姿势：使用 Context 作用：跨组件传递数据（比如：主题、语言等）实现思路调用 React. createContext() 创建...const { Provider, Consumer } = React.createContext() 使用 Provider 组件作为父节点。...属性：表示该组件的子节点，只要组件有子节点，props就有该属性 children 属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数） function Hello(props

3.2K2 0

react高阶组件

本身不是一个组件，而是一个函数；其次，这个函数的参数是一个组件，返回值也是一个组件；定义 import React, { PureComponent } from 'react' class App..., { PureComponent } from 'react'; // 定义一个高阶组件 function enhanceRegionProps(WrappedComponent) { return..., { PureComponent } from 'react'; // 定义一个高阶组件 function enhanceRegionProps(WrappedComponent) { return..., { PureComponent, createContext } from 'react'; // 定义一个高阶组件 function withUser(WrappedComponent) {...user => { // 给WrappedComponent传props值(如：的pwd) // 以及context

6151 0

react内置组件

# 场景当我们在 React 中构建应用程序时，有时某些组件的加载可能需要一些时间。为了提供更好的用户体验，我们可以使用 Suspense 组件。...# 使用方法：导入所需的依赖：import React, { Suspense } from 'react'; 使用 React.lazy()动态加载需要延迟加载的组件：const MyComponent...= React.lazy(() => import('.... 将需要延迟加载的组件放置在 Suspense 组件内部： # 示例代码： import React, { Suspense } from "react..."; const MyComponent = React.lazy(() => import(".

2553 0

React组件基础

组件基本介绍组件是React中最基本的内容，使用React就是在使用组件组件表示页面中的部分功能多个组件可以实现完整的页面功能组件特点：可复用，独立，可组合 [外链图片转存失败,源站可能有防盗链机制...为了区分普通标签，函数组件的名称必须大写字母开头函数组件必须有返回值，表示该组件的结构如果返回值为null,表示不渲染任何内容使用函数创建组件 function Hello () {...类组件：使用ES6的class语法创建组件约定1：类组件的名称必须是大写字母开头约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或者属性约定3：类组件必须提供...React想要实现这种功能，就需要使用有状态组件来完成。... ) } } 多表单元素的优化问题：每个表单元素都需要一个单独的事件处理程序，处理太繁琐优化：使用一个事件处理程序处理多个表单元素步骤给表单元素添加name属性，名称与

3K2 0

React 组件进阶

当组件标签有子节点时，props 就会有该属性 children 属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数，jsx）如果我们像上面 ListItem 标签里面写上东西...常见类型：array、bool、func、number、object、string React元素类型：element 必填项：isRequired 特定的结构对象：shape({}) 我们看看官方的文档...Typechecking With PropTypes – React 接下来我们演示一下必填项吧。你没有看错哈，这个东西就是这么简单，只是在后面点出来就行了。然后我们看看浏览器控制台。...React lifecycle methods diagram 2.1 生命周期 - 挂载阶段钩子函数触发时机作用 constructor 创建组件时，最先执行，初始化的时候只执行一次 1....（从页面中消失）执行清理工作（比如：清理定时器等）代码演示： import React from "react"; class Test extends React.Component {

5603 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭