最近在看react ， jsx的語法一開始看起來確實不習慣，但是確實比較靈活

運行效果：

?

代碼：

import React from 'react'; // import ShadowDOM from 'react-shadow'; import './index.css'; let timeId = null; // 循環定時的狀態 export default class Index extends React.Component {constructor () {super();this.state = {timeId: null,list: [],listClone: [],current: 0};}// 刪除列表項目deleItem (title, date, index) {let data = [...this.state.list];data.splice(index, 1);this.setState({list: data});alert('刪除成功！');}// 點擊狀態點切換狀態toggleState (item, index) {let data = this.state.listClone;this.setState({list: data[index],current: index});}// 鼠標移入狀態點stateMouseenter () {clearInterval(timeId);}// 鼠標移出狀態點stateMouseleave () {this.loop(3000); }// 輪播事件loop (speed) {timeId = setInterval(() => {let index = this.state.current;let data = this.state.listClone;if (index < this.state.list.length - 1) {index ++;this.setState({list: data[index],current: index});} else {index = 0;this.setState({list: data[index],current: index});}}, speed);}render () {let data = this.state.list;let active = '';// 數據列表let Li = data.map((item, index) => {return (<li onClick={this.deleItem.bind(this, item.title, item.date, index)} key={index}><span>{item.title + '==' + index + new Date().getTime()}</span><span>{item.date}</span></li>);});// 狀態點let span = this.state.listClone.map((item, index) => {index === this.state.current ? active = 'active' : active = '';return (<spanonClick={this.toggleState.bind(this, item, index)} key={index}onMouseEnter={this.stateMouseenter.bind(this)}onMouseLeave={this.stateMouseleave.bind(this)}className={active}>{index + 1}</span>);});return (<div className="list-item"><p className="item-state">{span}</p><ul>{Li}</ul></div>);}componentWillMount () {// 頁面加載的數據let list = [{date: '2018-02-12 12:54:52',title: '● 今天深圳市天氣很好，很適合外出旅游1'},{date: '2018-02-12 12:54:52',title: '● 今天深圳市天氣很好，很適合外出旅游2'},{date: '2018-02-12 12:54:52',title: '● 今天深圳市天氣很好，很適合外出旅游3'},{date: '2018-02-12 12:54:52',title: '● 今天深圳市天氣很好，很適合外出旅游4'},{date: '2018-02-12 12:54:52',title: '● 今天深圳市天氣很好，很適合外出旅游5'}];this.setState({list: [...list],listClone: [[...list], [...list], [...list], [...list], [...list]]});this.loop(3000);}componentDidMount () {}componentDidUpdate () {}componentWillUnmount () {} };

CSS:?

.list-item {width: 600px;padding: 10px;margin: 40px auto;background: #ccc;border: 1px solid #eee; } .list-item li {margin: 10px 0;font-size: 14px;color: #333;text-align: left; } .list-item li span:nth-child(2) {float: right; } .item-state {text-align: right; } .item-state span {display: inline-block;height: 20px;width: 20px;color: #333;line-height: 20px;text-align: center;background: #eee;border-radius: 20px;margin-left: 5px;cursor: pointer; } .item-state span.active {background: red; }

?

總結

以上是生活随笔為你收集整理的react 实现banner轮播效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。