React学习之旅Part4：React组件的function创建方式及传值、抽离为单独jsx文件

浅浅的花香味﹌ 2023-02-16 04:10 28阅读 0赞

## 创建方式：构造函数 ##

首先**导包**

import React from 'react'
    import ReactDOM from 'react-dom'

可以用**构造函数**来**创建**组件  
一个构造函数就是一个组件  
组件的首字母必须大写 否则浏览器将当作普通标签 解析失败 从而报错

在组件中必须**返回**一个合法的JSX虚拟DOM元素 否则会报错

function Hello(props)// 在构造函数中接收外界传来的数据
    {
        
        // 若在一个组件中return null 则代表该组件为空 什么都不渲染
        // return null;
    
        // 组件中的props是只读的 不能重新赋值 无论是React还是Vue
        
        return <div>Hello{
        props.user.name}</div>
    }

**使用组件**  
直接将组件的名称以**标签**的形式放置于页面上即可

ReactDOM.render(<div>
        Test
        <Hello></Hello>
    </div>,document.getElementById("app"))

#### 组件的传值：props ####

首先定义一个测试用的对象：

const user={
        
        name:"陈涛",
        age:18
    }

使用组件并为组件传递props数据  
将数据作为一个自定义的**属性**传入到组件中

ReactDOM.render(<div>
        Test
        <Hello user={
        user}></Hello>
    </div>,document.getElementById("app"))

在组件中定义一个**形参**用于接收外界传来的数据

function Hello(props)
    {
        
        console.log(props)
        return <div>Hello{
        props.myuser.name}</div>
    }

*组件中的props是只读的 只能获取 不能重新赋值 无论是React还是Vue*

#### 使用ES6展开运算符简化传值过程 ####

**展开运算符** 形如`...对象名`  
**三个点**代表**展开** 即对象里面有多少属性 就传递多少属性

function Hello(props)
    {
        
        console.log(props)
        return <div>Hello{
        props.name}</div>
    }
    
    ReactDOM.render(<div>
        Test
        <Hello {
        ...user}></Hello>
    </div>,document.getElementById("app"))

## 二、抽离为单独的jsx文件 ##

在src下创建一个components包 用于存放React组件  
创建一个后缀名为`.jsx`的文件 代表React的组件文件

组件依赖于react包 因此在组件中 需要**导入react包** 否则会报错  
在组件中 需对外暴露一个接口 以供外界访问

Hello.jsx：

// 组件依赖于react包 因此必须导入 否则会报错
    import React from 'react'
    
    // 创建并暴露组件 供外界访问
    export default function Hello(props)
    {
        
        console.log(props)
        return <div>Hello{
        props.name}</div>
    }

使用：  
在导入时 jsx后缀名默认不能省略(除非进行配置)

// 导入Hello组件
    import Hello from './components/Hello.jsx'
    
    const user={
        
        name:"陈涛",
        age:18
    }
    
    ReactDOM.render(<div>
        Test
        <Hello {
        ...user}></Hello>
    </div>,document.getElementById("app"))

#### 配置省略jsx后缀名 ####

在Webpack的配置文件**webpack.config.js**中进行配置：

配置**resolve的extensions**

在extensions里配置的这些后缀名 代表这几个文件的后缀名可省略不写  
默认会进行补全 且补全的规则是：按**配置的顺序**从左到右挨个查找是否有文件名与后缀名匹配的文件

module.exports={
        
        resolve:{
        
            extensions:[".js",".jsx",".json"]
        }
    }

#### 配置webpack别名根目录 - 用一个符号代替根目录 ####

还是在**webpack.config.js**中进行配置  
在resolve里配置**alias**(别名)

module.exports={
        
        resolve:{
        
            extensions:[".js",".jsx",".json"],
            alias:{
        
                "@":path.join(__dirname,"./src") // 这样 @符号就表示项目的根目录了
            }
        }
    }

如此配置之后 即可这么导入组件了：

import Hello from '@/components/Hello'

--------------------