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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!