React发明了JSX,利用HTML语法来创建虚拟DOM。
React的核心机制之一就是可以在内存中创建虚拟的DOM元素。以此来减少对实际DOM的操作从而提升性能。
JSX 即Javascript XML,它是对JavaScript 语法扩展。
React 使用 JSX 来替代常规的 JavaScript。
你也可以认为JSX其实就是JavaScript。当遇到<
,JSX就当HTML解析,遇到{
就当JavaScript解析。
这里还是使用系列1里面的项目作为示例
app.js
,并将其暴露import React,{Component} from 'react'
class App extends Component {
render() {
return (
<div>
<input />
<ul>
<li>曼城</li>
<li>切尔西</li>
</ul>
</div>
)
}
}
export default App
index.js
中将其编译后渲染到对应的 dom
上import App from './App'
ReactDOM.render(<App />,document.getElementById('root'))
另:React中标签分为两种类型
- React组件类型(自定义,如上面的App)
- dom类型(div,span等)
React渲染的时候通过首字母大小写来进行区分
使用方式非常简单,把js代码写到{}
里面即可
app.js
作为示例,里面用到了三元运算符
import React,{Component} from 'react'
class App extends Component {
render() {
return (
<div>
<input />
<ul>
<li>{true?'曼城':'曼联'}</li>
<li>切尔西</li>
<li>{100+100}</li>
</ul>
</div>
)
}
}
export default App
ps:
- JSX中是不可以用if else的
- js和xml部分都不要加引号,不然会被当做字符串解析
JSX中有两种注释方式
class App extends Component {
render() {
return (
<div>
{
//这是单行注释
}
<input />
<ul>
<li>{true?'曼城':'曼联'}</li>
<li>切尔西</li>
</ul>
</div>
)
}
}
class App extends Component {
render() {
return (
<div>
{
/*
这是多行注释
*/
}
<input />
<ul>
<li>{true?'曼城':'曼联'}</li>
<li>切尔西</li>
</ul>
</div>
)
}
}
正常在写React组件的时候,外层需要有个
div
做一层包裹。
但是在Flex布局的时候就不能有这层包裹。所以就考虑引入<Fragment>
标签
Fragment
import React,{Component,Fragment} from 'react'
<div>
换成 <Fragment>
import React,{Component,Fragment} from 'react'
class App extends Component {
render() {
return (
<Fragment>
<input />
<ul>
<li>{true?'曼城':'曼联'}</li>
<li>切尔西</li>
</ul>
</Fragment>
)
}
}
export default App
JSX中的class(css中的类)需要替换为className,因为如果用class会和React中的class(类)重名
<input className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
如果需要将绑定的值直接当做html进行解析
需要加入这样一个属性:dangerouslySetInnerHTML={{__html:自定义变量}}
这样写的时候,相对于<li>{item}</li>
。这个{item}
就可以删除了
<ul>
{
this.state.list.map((item,index)=>{
return (
<li
key={index+item}
onClick={this.deleteItem.bind(this,index)}
dangerouslySetInnerHTML={{__html:item}}
>
</li>
)
})
}
</ul>
如果我们想在点击label的时候就激活文本框,一般做法是在input上定义一个id,然后label加一个for属性,值为刚刚定义的id
<label for="testInput">姓名:</label>
<input id="testInput"/>
但是在JXS语法中会和循环的for重名,所以需要把 for
改为 htmlFor
<label htmlFor="testInput">姓名:</label>
<input id="testInput"/>
本文地址:https://blog.csdn.net/qq919694688/article/details/107534001
如对本文有疑问, 点击进行留言回复!!
offset、client、scroll (width,height、left,top、X,Y)
网友评论