React 项目--创建组件（7）

冷不防 2022-09-03 12:27 160阅读 0赞

# 创建组件 #

在上一篇的博客中我们介绍了react中字符串的处理方式和字符串数组的处理方式，如需回顾:

[https://blog.csdn.net/datouniao1/article/details/119477932][https_blog.csdn.net_datouniao1_article_details_119477932]

在这一篇的博客中我们继续学习，在React项目中如何创建组件，以及向组件传递参数

创建组件两种方式，我们先介绍第一种形式，第一种形式和我们在js 中用到的函数很是接近

我们先看最为简单的

function Hello(){
         return null;
    }
    
    const myh1=<div>
                   我是一个div
                   <Hello></Hello>
     </div>
    ReactDOM.render(myh1,document.getElementById("app"));

我们来分析这一串代码：

function Hello()\{   -----function 声明，并且组件的名称Hello 首字母是大写的

return null;   ------返回为null 组件是必须有返回值的

如何使用组件：

const myh1=<div>  
               我是一个div  
               <Hello></Hello>   ---组件的使用  
 </div>

那么上面这一串代码有怎么样的效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70][]

可以看到的是什么也没有返回，因为我们返回的是null ，也就是说当返回null 的时候 页面上是什么都没有的

此处肯定大家有疑问，那么如果我的返回不是null 会有怎么样的效果

比如：

function Hello(){
        return <h1>我是Hello 组件</h1>;
    }

这个地方组件是有返回的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1][]

但是这个组件怎么没有参数啊，能不能定义一个带有参数的组件啊

带有参数的组件就是这样的定义

function Hello(props)\{     ------props 标识的是组件的形参  需要注意的是这个地方的参数是只读的  
    console.log(props);  
    return <h1>我是Hello 组件</h1>;  
\}

调用的时候如何传递参数：

(1) <Hello name=\{people.name\} age=\{people.age\}></Hello>

我们看打印出来的props：

\{name: "wdg", age: 18\}

但是(1)中传递参数我们看到是非常麻烦的，每一个属性都需要写，其实在ES6中有一个展开的运算符我们也可以写成这样

结果控制台的输出如下：\{name: "wdg", age: 18, job: "chengxuyuan"\}

# 创建组件文件 .jsx #

在上面我们在index.js文件中创建了一个组件，如果我们所有创建的组件都在这个文件中，那么这个文件会慢慢的变大，所以说我们需要向办法把组件存入到其他的文件中，该如何设置，首先我们创建一个文件夹，文件夹的名称为 compents

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2][]

在这个文件夹中我们创建一个文件：Hello.jsx 内容如下：

import React from 'react'
    import ReactDOM from 'react-dom'
    
    function Hello(props){
      
        return <div>你好，我的名字是:{props.name},我今年：{props.age} ,我的地址是：{props.address}</div>
    }
    
    export default Hello

解析： 我们在组件的文件中需要导入 React和ReactDOM

然后定义组件，最后导出组件

那么我们在index.js 文件中要使用Hello 组件，就需要将Hello 组件导入到index.js 文件中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3][]

我们可以看到的是导出的时候:'./components/Hello'  没有加上.jsx 如何实现，原因是因为我们在

wenpack.config.js 中做了如下的配置：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4][]

resolve 我们知道是解析的意思，表示我们在导入的时候，会将导入的文件的位置默认加上这几个后缀，首先是会去找有没有Hello.js 文件，然后找有没有Hello.jsx,最后找有没有Hello.json 按照我们配置的顺序去查找

修改了配置文件之后重启项目

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 5][]

上面讲述了我们在编写react项目的时候，如何创建一个组件，和如何来编写jsx 文件

希望对你有所帮助

[https_blog.csdn.net_datouniao1_article_details_119477932]: https://blog.csdn.net/datouniao1/article/details/119477932
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: /images/20220829/81f680446fbc4cd381abc694b1200c2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1]: /images/20220829/4ade1b62f17046f79fc419342083c8eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2]: /images/20220829/bf13f195a2154af5b767c79ef1a5e944.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3]: /images/20220829/7564d64f1f3a4917914ddcfa1740f6a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4]: /images/20220829/b16b89535ee24bcdbe43eef73ed6d053.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 5]: /images/20220829/ba73a1033be04ed086e5b8db512585b3.png