创建组件

在上一篇的博客中我们介绍了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中有一个展开的运算符我们也可以写成这样

结果控制台的输出如下：{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 文件

希望对你有所帮助

React 项目--创建组件（7）相关推荐

React项目创建以及结构
react是什么 React是一个声明式,高效且灵活的用于构建用户界面的JavaScript组件库,使用react可以将一些简短,独立的代码片段合成复杂的UI界面,这些代码片段被称作组件 react介 ...
React项目创建报错解决方案npm ERR! code 1 npm ERR! path E:\Node1\untitled5\node_modules\fibers npm ERR! command
在用webstorm创建React项目时发现一个巨离谱的错误 (node:15528) ExperimentalWarning: The fs.promises API is experimental ...
react项目创建步骤
今天创建第一个react项目,也踩了一些坑.从npm安装开始记录一下. 1.下载 nodejs并安装 2.nodejs 目录下创建node_global 和 node_cache文件夹 3. 配置目 ...
vue项目创建组件的步骤展示
在home界面文件中提取出相关的子组件如typeNav子组件如果这个typeNav是全局多个界面用到了就放入components文件夹中当作全局公共组件如果只有home界面用到了就放在pag ...
React基础篇（四）之创建组件方式分析
本小将讲述在 React 中, 1.通过函数 function 方式创建组件并分离成单独的组件实现,然后传递参数给组件使用 2.通过关键字 class 来创建组件,并分离成单独的组件实现,然后传递参 ...
如何创建React项目
前言构建React项目的几种方式: create-react-app 脚手架快速搭建 react 项目(推荐) yeoman 脚手架搭建 react 项目 webpack 一步一步构建 react ...
如何创建一个React项目（超简单）
1.安装Node.js(官网Node.js下载) 2.运行node -v和npm -v两条命令(检验是否下载成功Node.js) 3.npm install -g cnpm --registry=ht ...
如何创建一个 react 项目
目录前言一.create-react-app 脚手架快速搭建 react 项目 1.安装 create-react-app 2.检测 create-react-app 是否安装成功 3.创建 re ...
react项目的搭建与启动
react项目的搭建与启动准备工作(环境的搭建) react项目创建与启动常用插件安装 Sass/Scss安装准备工作(环境的搭建) (已经准备好的这一步可以跳过) 1.安装Node.js(安装 ...

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

创建组件

创建组件文件 .jsx

React 项目--创建组件（7）相关推荐

最新文章

热门文章