react学习笔记2:jsx

前端之家收集整理的这篇文章主要介绍了react学习笔记2:jsx前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

jsx=js+xml,不知道xml是什么,回忆一下使用过的的svg

学习笔记都会在 create-react-app 创建的项目下测试,我们会不断修改index.js的代码

1.输出helloworld

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    <h1>Helloworld</h1>,document.getElementById('root')
);
registerServiceWorker();

我们关心的就是使用jsx的部分,在index.js上面导入了react和react-dom类库,下面就是我们jsx的写法,

我们使用的是:

ReactDOM.render(
    <h1>Helloworld</h1>,document.getElementById('root')
);

这个方法的第一个参数我们传递的就是xml,第二个参数是一个原生js的dom节点,

我们审查元素:

2.使用复杂xml结构

非常简单,不过最外层只能是一个标签,不能这么去写:

这种写法才是正确的:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    <div><h1>Helloworld</h1><h2>2</h2></div>,document.getElementById('root')
);
registerServiceWorker();

在最外层有只能有一个标签

3.标签设置属性

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    <div><h1 title="Helloworld" data-aa="aa">Helloworld</h1><h2>2</h2></div>,document.getElementById('root')
);
registerServiceWorker();

4.表达式的使用

如果你使用过ng或者vue就会知道,html嵌套的{{}}等只是支持单表达式,react是支持各种js语句的:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    <div><h1 title="Helloworld" data-aa="aa">Helloworld</h1><h2>{1+3==2?2:3}</h2></div>,document.getElementById('root')
);
registerServiceWorker();

5.类名设置

和我们直接在标签上写class=“xx”不一样,在jsx中只能用 className 设置类名,就想我们利用dom去获取和设置类名一样:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    <div><h1 title="Helloworld" data-aa="aa" className="css1">Helloworld</h1><h2>{1+3==2?2:3}</h2></div>,document.getElementById('root')
);
registerServiceWorker();

6.行内样式

粗鲁的方式:

我们会发现直接报错了,因为jsx有自己的语法,在行内样式的设置上必须采用对象的形式取设置:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
var objstyle={
	color:"red"
};
ReactDOM.render(
    <div>
		<h1 title="Helloworld" data-aa="aa" className="css1">Helloworld</h1>
		<h2>{1+3==2?2:3}</h2>
		<p style={objstyle}>我是行内样式</p>
	</div>,document.getElementById('root')
);
registerServiceWorker();

7.数组方式设置xml

会把数组的xml识别到,并且自动插入到对应位置:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
var objstyle={
	color:"red"
};
var arr=[
	<h1 title="Helloworld" data-aa="aa" className="css1">Helloworld</h1>,<h2>{1+3==2?2:3}</h2>,<p style={objstyle}>我是行内样式</p>
]
ReactDOM.render(
    <div>
		{arr}
	</div>,document.getElementById('root')
);
registerServiceWorker();

8.总结

1.render方法第一个参数是xml,这个xml外层只能是一个标签,里面可读取xml形式的arr

2.render方法第二个参数是dom节点

3.类名只能用className设置

4.行内样式要使用对象形式赋值

5.支持的表达式复杂

6.一对{}设置处理

7.xml外层没有引号,不是字符串而是xml

猜你在找的React相关文章