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

创建方式：构造函数

首先导包

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'

---