04. React-使用jsx语法

最新推荐文章于 2024-09-06 10:15:18 发布

王小扣

最新推荐文章于 2024-09-06 10:15:18 发布

阅读量398

点赞数

分类专栏： React.js

本文链接：https://blog.csdn.net/qq_29150765/article/details/81193338

版权

React.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

使用JSX

在js文件中，默认不能写类似HTML的标记，否则会打包失败
可以使用 babel 来转换这些JS中的标签，将标签转换为虚拟DOM对象 React.createElement
注意：在js中混合写入类似于 HTML 的语法，叫做JSX语法；符合XML规范的JS

配置babel

一、安装babel插件

npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D

二、安装能够识别转换JSX语法的包

npm i babel-preset-react -D

三、在webpack.config.js中添加对babel插件的引用

//webpack 默认只能打包处理.js后缀名类型的文件，
//像.png .vue 无法主动处理
//所以要配置第三方的loader；
//所有第三方模块的配置规则放入module
module: {
	rules: [
		{
			test: /\.js|jsx$/,
			use: 'babel-loader',
			exclude: /node_modules/ //排除项目，必须,是正则不是字符串
		}
	]
}

四、在项目根目录文件夹中，添加babel配置文件.babelrc，注意这个文件名有个rc不是单独的babel

{
	"presets": ["env", "stage-0", "react"],
	"plugins": ["transform-runtime"]
}

源代码

JSX语法

在jsx中混合写入js表达式

在 JSX 控制的区域内（HTML代码），要把js代码写到{}中
jsx代码中的HTML标签必须遵循XML规范，<hr/>标签需要闭合，必须是小写

渲染类型

渲染数字
渲染字符串
渲染布尔值：{true}不会在页面渲染，但不是报错；{true.toString}会渲染出true;三目运算{true?'真':'假'}可以渲染出真
为属性绑定值：<p title = {title}>p标签</p>不要写双引号
渲染jsx元素：let h1 = <h1>this is h1 tag</h1>；{h1}渲染出h1标签；h1渲染出h1字符串
数组let arrStr = ['一', '二', '三']，用{arrStr}渲染没有问题
渲染jsx元素数组：

let arr = [
	<h2>这是h2</h2>,
	<h3>这是h3</h3>
]
ReactDOM.render(<div>{arr}</div>, document.getElementById('app'))
//Warning: Each child in an array or iterator should have a unique "key" prop.

将普通字符串数组转为jsx数组并渲染到页面上（两种方案）

在jsx外部手动循环

let arrStr = ['一', '二', '三']

let nameArr = [];

arrStr.forEach(item => {
	let temp = <h5>{item}</h5>
	nameArr.push(temp)
})

ReactDOM.render(<div>
		{nameArr}
	</div>, document.getElementById('app'))
//Warning: Each child in an array or iterator should have a unique "key" prop.

jxs在内部循环

let arrStr = ['一', '二', '三']

ReactDOM.render(<div>
		{arrStr.map(item => <h5>{item}</h5>)}
	</div>, document.getElementById('app'))
//Warning: Each child in an array or iterator should have a unique "key" prop.

注意：

在react中，需要把 key 添加给被 forEach 或者 map 或者 for 循环直接控制的元素，否者会有警告

let arrStr = ['一', '二', '三']

ReactDOM.render(<div>
        {arrStr.map(item => <h5 key={item}>{item}</h5>)}
    </div>, document.getElementById('app'))