React 项目--创建组件（7）_react 根据字符串生成界面-优快云博客

本文链接：https://blog.youkuaiyun.com/datouniao1/article/details/119490259

创建组件

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

https://blog.youkuaiyun.com/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 文件中