React-----学习笔记-----组件的组合、嵌套和组件树(五)

最新推荐文章于 2024-09-30 23:17:42 发布

Skillex

最新推荐文章于 2024-09-30 23:17:42 发布

阅读量348

点赞数

分类专栏： React

React 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在React中创建并使用自定义组件。通过具体的示例代码，展示了如何构建Header和Title两个组件，并将Title组件嵌套在Header组件内进行渲染。文章强调了自定义组件的命名规范以及组件之间的组合方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在已经有了Header组件，构建新的组件Title，并在Header中使用：

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class Header extends Component{
    render () {
        return (
            <div>
                <Title/>
            </div>
        )
    }
}
class Title extends Component {
    render () {
        return (
            <h1>my-react</h1>
        )
    }
}

可以直接在 Header标签里面直接使用Title标签。React.js会在<Title />所在的地方把Title 组件的render方法表示的 JSX内容渲染出来
自定义的组件都必须要用大写字母开头，普通的 HTML 标签都用小写字母开头
组件可以和组件组合在一起，组件内部可以使用别的组件。就像普通的 HTML标签一样使用就可以。这样的组合嵌套，最后构成一个组件树