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

创建组件

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

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>

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

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

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

比如：

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

 这个地方组件是有返回的

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

function Hello(props){
    console.log(props);
    return <h1>我是Hello 组件</h1>;
}
const people={
    name:"wdg",
    age:18,
    job:"chengxuyuan"
}
const myh1=<div>
               我是一个div
         <Hello name={people.name} age={people.age}></Hello>
 </div>

ReactDOM.render(myh1,document.getElementById("app"));

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

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中有一个展开的运算符我们也可以写成这样

<Hello {...people}></Hello>

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

创建组件文件 .jsx

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

在这个文件夹中我们创建一个文件：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 文件中

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

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

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

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

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

希望对你有所帮助