前言：
承接前面的内容，继续学习React
在JSX中写JS代码
在jsx中混合写入js表达式
渲染数字
import React from 'react'
import ReactDOM from 'react-dom'
const a=10
//调用Render进行渲染
ReactDOM.render(<div>
{a}
</div>,document.getElementById('app'))好比占位符一样，我们的js的变量可以直接嵌入到jsx区域中
甚至还可以做个算数运算
import React from 'react'
import ReactDOM from 'react-dom'
const a=10
//调用Render进行渲染
ReactDOM.render(<div>
{a+2}
</div>,document.getElementById('app'))
渲染字符串
import React from 'react'
import ReactDOM from 'react-dom'
const a=10
let str="差不多冬至，一早一晚还是有雨"
//调用Render进行渲染
ReactDOM.render(<div>
{a+2}
<hr />
{str}
</div>,document.getElementById('app'))渲染布尔
import React from 'react'
import ReactDOM from 'react-dom'
const a=10
let str="差不多冬至，一早一晚还是有雨"
let bool=true
//调用Render进行渲染
ReactDOM.render(<div>
{a+2}
<hr />
{str}
<hr/>
{bool.toString()}
<hr/>
{bool?"真的":"假的"}
</div>,document.getElementById('app'))
给标签增加属性
import React from 'react'
import ReactDOM from 'react-dom'
const a=10
let str="差不多冬至，一早一晚还是有雨"
let bool=true
let title='999'
//调用Render进行渲染
ReactDOM.render(<div>
{a+2}
<hr />
{str}
<hr/>
{bool.toString()}
<hr/>
{bool?"真的":"假的"}
<hr/>
<p title={title}>这是一个p标签</p>
</div>,document.getElementById('app'))渲染JSX元素
import React from 'react'
import ReactDOM from 'react-dom'
const a=10
let str="差不多冬至，一早一晚还是有雨"
let bool=true
let title='999'
let h1=<h1>有意思</h1>
//调用Render进行渲染
ReactDOM.render(<div>
{a+2}
<hr />
{str}
<hr/>
{bool.toString()}
<hr/>
{bool?"真的":"假的"}
<hr/>
<p title={title}>这是一个p标签</p>
<hr/>
{h1}
</div>,document.getElementById('app'))渲染jsx元素的数组
import React from 'react'
import ReactDOM from 'react-dom'
const a=10
let str="差不多冬至，一早一晚还是有雨"
let bool=true
let title='999'
let h1=<h1>有意思</h1>
const arr=[
<h2>这是h2</h2>,
<h3>这是h3</h3>,
]
//调用Render进行渲染
ReactDOM.render(<div>
{a+2}
<hr />
{str}
<hr/>
{bool.toString()}
<hr/>
{bool?"真的":"假的"}
<hr/>
<p title={title}>这是一个p标签</p>
<hr/>
{h1}
<hr/>
{arr}
</div>,document.getElementById('app'))
将普通字符串数组，转换成jsx数组渲染
第一种方法——利用外部循环
const arrStr=[
'血魔',
'水人',
'骷髅王'
]
//定义一个空数组，用来存放名称 标签
const namearr=[]
arrStr.forEach(element => {
const temp=<h5>{element}</h5>
namearr.push(temp)
});
//调用Render进行渲染
ReactDOM.render(<div>
{namearr}
</div>,document.getElementById('app'))第二种方法——利用内部循环
利用数组的map函数
const arrStr=[
'血魔',
'水人',
'骷髅王'
]
//调用Render进行渲染
ReactDOM.render(<div>
{arrStr.map(item=>{
return <h5>{item}</h5>
})}
</div>,document.getElementById('app'))优化一下箭头函数（箭头函数下只有一行代码则可以不用花括号，也不用return了）
const arrStr=[
'血魔',
'水人',
'骷髅王'
]
//调用Render进行渲染
ReactDOM.render(<div>
{arrStr.map(item=><h5>{item}</h5>)}
</div>,document.getElementById('app'))
注意，虽然上述方法渲染没有问题，但是在审查元素中会有警告，这些元素需要有key，包括前几步的那个jsx数组。
即在react中，需要把key添加给被 forEach 或 map 或 for 循环直接控制的元素，最外层元素。
比如上面的第一种方法，我们可以这样暂时简单解决一下：
const arrStr=[
'血魔',
'水人',
'骷髅王'
]
//定义一个空数组，用来存放名称 标签
const namearr=[]
arrStr.forEach(element => {
const temp=<h5 key={element}>{element}</h5>
namearr.push(temp)
});
//调用Render进行渲染
ReactDOM.render(<div>
{namearr}
</div>,document.getElementById('app'))jsx中的注意事项
写注释的方法
{/* 内容 */}为jsx中的元素添加class类名
需要使用 className 来替代 class；htmlFor 替代 label的 for 属性
这是因为class和for在js中也是关键字，为了防止歧义。
标签闭合
因为jsx是xml格式，所以标签必须闭合，单标签必须自闭
创建组件
我们来学习用react创建组件
第一种方式：
把组件做成函数，然后把组件的名称以标签的形式丢到页面上
注意！组件的首字符必须大写
import React from 'react'
import ReactDOM from 'react-dom'
//第一种创建组件的方式
function Hello(){
//在组件中return一个null，则什么也不渲染
return null
}
ReactDOM.render(<div>
123
{/*直接把组件的名称以标签形式丢到页面上即可*/}
<Hello></Hello>
</div>,document.getElementById('app'))在函数中，必须返回一个合法的jsx虚拟DOM元素
我们再尝试传入参数并渲染出来
import React from 'react'
import ReactDOM from 'react-dom'
//第一种创建组件的方式
function Hello(props){
console.log(props)
return <div>这是一个组件_{props.name}_{props.age}_{props.sex}</div>
}
const dog={
name:'大黄',
age:3,
sex:'雄'
}
ReactDOM.render(<div>
123
{/*直接把组件的名称以标签形式丢到页面上即可*/}
<Hello name={dog.name} age={dog.age} sex={dog.sex}></Hello>
</div>,document.getElementById('app'))
另外要注意，不管是VUE还是React，组件中的props永远都是只读的
第二种方式：
上面的传参方式相对繁琐，我们可以直接这么做：
利用ES6的语法——展开运算符
很好理解
下面这个
var o1={ age:22, address:'上海', phone:'10086' } var o2={ name:'zs', age:o1.age, address:o1.address, phone:o1.phone }和下面这个
var o1={ age:22, address:'上海', phone:'10086' } var o2={ name:'zs', ...o1 }是等价的
即展开运算符可以将对象或数组的属性展开到另一个对象或数组身上
所以我们这样修改代码即可
import React from 'react'
import ReactDOM from 'react-dom'
//第一种创建组件的方式
function Hello(props){
console.log(props)
return <div>这是一个组件_{props.name}_{props.age}_{props.sex}</div>
}
const dog={
name:'大黄',
age:3,
sex:'雄'
}
ReactDOM.render(<div>
123
{/*直接把组件的名称以标签形式丢到页面上即可*/}
<Hello {...dog}></Hello>
</div>,document.getElementById('app'))将组件抽离为单独的JSX文件
我们上面的文件不免有些繁琐，若能单独抽离文件来存放组件就好了，react正好提供了这样的能力。
我们可以在/src目录下再创建一个目录components，这个目录专门用来存放我们的一些组件
而且我们可以建立.jsx的文件，这种文件就是专门用来存放React组件的文件格式后缀名
看看我们刚才的index.js文件：
import React from 'react'
import ReactDOM from 'react-dom'
//没有做配置的话必须要写全文件后缀
import Hello from './components/Hello.jsx'
const dog={
name:'大黄',
age:3,
sex:'雄'
}
ReactDOM.render(<div>
123
{/*直接把组件的名称以标签形式丢到页面上即可*/}
<Hello {...dog}></Hello>
</div>,document.getElementById('app'))再看看/src/components/Hello.jsx
//注意必须是大写的R——React
import React from 'react'
//创建组件并暴露出去
export default function Hello(props){
console.log(props)
return <div>这是一个组件_{props.name}_{props.age}_{props.sex}</div>
}
正常渲染，没有问题
上面在示例中导入.jsx文件时省略后缀名应该怎么做呢？
我们来做一些配置
在 webpack.config.js 中，做修改：
module.exports={ mode:'development', //在webpack 4.x中，有一个很大的特性，就是 约定大于配置 //默认打包入口路径是 src/index.js plugins:[ htmlPlugin ], module:{ //所有第三方模块的配置规则 rules:[ //第三方匹配规则 //千万别忘记exclude排除项 {test: /\.js|jsx$/,use:'babel-loader',exclude:/node_modules/} ] }, //固定写法 resolve:{ //表示这几个文件的文件名可以不写了 extensions:['.js','.jsx','json'] } }然后重新启动项目即可！
配置webpack设置根目录
我们可以通过配置webpack，来设置目录，使其更加准确
还是修改我们的webpack.config.js
module.exports={
mode:'development',
//在webpack 4.x中，有一个很大的特性，就是 约定大于配置
//默认打包入口路径是 src/index.js
plugins:[
htmlPlugin
],
module:{ //所有第三方模块的配置规则
rules:[ //第三方匹配规则
//千万别忘记exclude排除项
{test: /\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}
]
},
//固定写法
resolve:{
//表示这几个文件的文件名可以不写了
extensions:['.js','.jsx','json'],
//使@符号表示项目根目录中的src这一层路径
alias:{
'@':path.join(__dirname,'./src')
}
}
}我们在resolve中加了一个别名法则——alias，使@等价于src目录的绝对路径
这样一来，就可以修改index.js中的代码，使导入库的位置更加准确
import Hello from '@/components/Hello'这样就导入了/src/components/Hello.jsx
欢迎访问我的博客：is-hash.com
扫一扫
2249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
