创建组件
- 首先在src目录下面创建components文件夹
- 在文件夹中编写你所需要的组件名称。(Home.js)
- 在app.js中挂载该组件,Home组件中的数据即可渲染在页面。
import React from 'react'; import './assets/css/App.css' import HomePage from './components/Home.js' function App() { return ( <div className="App"> <HomePage/> </div> ); } export default App;
绑定数据
import React, { Component } from 'react'
class HomePage extends Component {
constructor(){
super()
this.state = {
username: '安沫昕'
}
}
render() {
return (
<div>
<h1>{this.state.username}</h1>
</div>
)
}
}
export default HomePage;
绑定属性
绑定属性注意:
1. class 要变成 className
2. for 要变成 htmlFor
3. style属性和以前的写法有些不一样
import React, { Component } from 'react'
class HomePage extends Component {
constructor(){
super()
this.state = {
title:'这是一个',
color: 'red',
style:{
color: 'red',
fontSize: '40px'
}
}
}
render() {
return (
<div>
<div title={this.state.title}>这是一个属性</div>
<div className={this.state.color}>这是一个style属性</div>
<label htmlFor="name">姓名</label>
<input text="type" />
<div style={{'color':'red'}}>绑定style</div>
<div style={this.state.style}>绑定style</div>
</div>
)
}
}
export default HomePage;
引入图片
- 引入本地图片-----模块的方式引入
import React, { Component } from 'react'
import Logo from '../assets/images/logo.svg'
export class image extends Component {
constructor(props){
super(props)
}
render() {
return (
<div>
// 引入本地图片
<img src={Logo} title="logo" className="images" />
<img src={require('../assets/images/logo.svg')} title="logo" className="images" />
// 引入远程图片
<img src="https://www.baidu.com/img/xinshouyedong_4f93b2577f07c164ae8efa0412dd6808.gif" title="logo" className="images" />
</div>
)
}
}
export default image;
循环数组
import React, { Component } from 'react'
class ForComponent extends Component {
constructor(props){
super(props)
this.state={
list: ['111','222','333'],
list2: [<h2 key='111'>我是一个h2</h2>,<h2 key='222'>我是一个h2</h2>],
list3:[
{title: 'news1111'},
{title: 'news2222'},
{title: 'news3333'},
]
}
}
render() {
let listResult = this.state.list.map(function(val, key){
return <li key={key}>{val}</li>
})
return (
<div>
// 循环标签
{this.state.list2}
<hr/>
// 循环
{listResult}
<hr/>
// 循环对象
<ul>
{
this.state.list3.map(function(val,key){
return <li key={key}>{val.title}</li>
})
}
</ul>
</div>
)
}
}
export default ForComponent;