React技术栈 --》 JSX语法书写JS和React创建组件 ## Day3

二、React中创建组件

一、第一种创建组件的方式

一、ES6中展开运算符的使用

二、将组件抽离为单独的jsx文件

二、ES6中class类使用的简单介绍

一、实例属性和静态属性

二、实例方法和静态方法

三、子类继承父类

四、class构造器中super函数的使用说明

五、class中为子类挂载独有的实例属性和实例方法

三、第二种创建组件的方式

---

前情回顾：React技术栈 --》plugin与JSX语法使用 ## Day2_亦世凡华、的博客-CSDN博客

一、在JSX中书写JS代码

=============

书写方法

---

在上文说到在React项目中启用JSX语法，那么如何在JSX中写JS代码呢？

这里一开始会先const一个常量，然后再把常量引入到ReactDOM中，能不能直接把HTML代码写入ReactDOM.render()里面呢？显然是可以的。代码执行过程中遇到

123

会babel转换的。

**那么如何通过一个变量来替换固定的123呢？**简单，只需要定义一个变量就行

//1.导入包

import React from 'react'

import ReactDOM from 'react-dom'



let a = 10;



//3.将创建好的虚拟DOM渲染到页面上去

ReactDOM.render(<div>{a}</div>,document.getElementById('app'))

这就有点像Vue里面的插件表达式了，不过Vue中引入变量名称需要{ { }}俩个大括号。 当然这是最基本的，JSX语法中也可以渲染很多东西，像字符串、布尔值等。

import React from 'react'

import ReactDOM from 'react-dom'



let str = 'hello world';

let bool = true;



//3.将创建好的虚拟DOM渲染到页面上去

ReactDOM.render(<div>

    {str}

    <hr />

    {bool ? '条件为真':'条件为假'}

</div>,document.getElementById('app'))

**那么如何为属性绑定值呢？**去掉引号加上括号和变量即可，什么情况下需要使用 {} 呢？当我们需要在 JSX 控制的区域内，写JS表达式，则需要把JS代码写到{}中。

//1.导入包

import React from 'react'

import ReactDOM from 'react-dom'



let title = '标题';



//3.将创建好的虚拟DOM渲染到页面上去



ReactDOM.render(<div>

    <p title={title}>这是p标签</p>

</div>,document.getElementById('app'))

**那么如何渲染JSX元素和元素数组呢？**在JSX中渲染元素直接const一个标签并放入JSX中即可。

//1.导入包

import React from 'react'

import ReactDOM from 'react-dom'



const h1 = <h1>我是一个h1标签</h1>

const arr = [

    <h1>这是h1</h1>,

    <h2>这是h2</h2>

]



//3.将创建好的虚拟DOM渲染到页面上去

ReactDOM.render(<div>

    {h1}

    {arr}

</div>,document.getElementById('app'))

那么如何将普通字符串数组转为jsx数组并渲染到页面上呢？  (俩种方式)

定义一个空数组来存放名称标签 [方案1]

//1.导入包

import React from 'react'

import ReactDOM from 'react-dom'



const arrStr = ['喜羊羊','懒洋洋','沸羊羊','慢羊羊','灰太狼'];

const newArr = [];



arrStr.forEach(item => {

    const temp = <h5>{item}</h5>

    newArr.push(temp)

})



//3