react-4 简单的组件的使用

女爷i 2022-03-19 05:24 182阅读 0赞

之前我们基于 create-react-app 创建出下面目录结构的项目：

![20190215114853784.png][]

我们也简单了解了react 是如何使用 ReactDOM.render() 方法渲染我们的页面；

一开始创建的项目在渲染的时候使用了组件的方式，但是我们在上一篇中演示了不用组件的方式来渲染

页面；下面我们来使用组件的方式重新演示一下；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70][]

我们在 src 目录中新增一个Pages 目录，新增4个页面（瞎写四个用来测试的页面），

（1）index 首页      （2） able 功能页       （3）introduce 简介页   show 展示页面

然后我们在Index目录中新建 index.js 和 index.css ；其实这个index 就是我们的组件；

如图：

![201902151828007.png][]

然后我们就可以在这个index 组件中写相关的页面内容：下面采用 es6 的写法

index.js     第一行代码引入react

第二行开始继承Component 创建我们的组件 Index ，这个写法就是这样固定的，记住就行，

我们需要关注的就是 return ()  括号里面的内容，这个就是我们要显示的页面，我们简单增加了一句话；

import React ,{Component} from 'react';
    
    export default class Index extends React.Component {
        render(){
            return(
                <section>
                    <p>测试组件的首页</p>
                </section>
            )
        }
    }

上面的组件没有任何的样式，我们先不关注样式，这样就是一个最简单的组件了，然后我们把这个组件挂载到页面中；

也就是修改 src目录下的 index.js 文件就可以了；

如下：  我们注释掉之前写的代码，把组件Index挂载到页面中，如下写法，还是使用ReactDom.render() 方法；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70 1][]

上面就是简单的使用一个组件的方法；

[20190215114853784.png]: /images/20220319/97ddd8393bad4a9badcdb7503f26fe50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70]: /images/20220319/4d85a6495d25492d903d26837ca65854.png
[201902151828007.png]: /images/20220319/1796038fcb6b4b4394cd56ca3458a177.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70 1]: /images/20220319/902f32f03d564a0a830601a98c672df9.png