1.用react做显示隐藏
<!DOCTYPE html>
<html>
<head>
<title>react学习</title>
<script type="text/javascript" src="../bower_components/react/react.js"></script>
<script type="text/javascript" src="../bower_components/react/react-dom.js"></script>
<script type="text/javascript" src="../bower_components/babel/browser.js"></script>
<style type="text/css">
.div{
200px;
height: 200px;
background: green;
}
</style>
</head>
<div id="container"></div>
<script type="text/babel">
class Comp extends React.Component{
constructor(...args){
super(...args);
this.state={display:'block'};
}
fn(ev){
this.setState({display:this.state.display==='block'?'none':'block'});
}
render(){
return <div>
<button onClick={this.fn.bind(this)}>点击显示隐藏</button>
<div className="div" style={{display:this.state.display}}></div>
</div>
}
}
var oDiv=document.getElementById('container');
ReactDOM.render(
<Comp/>,
oDiv
)
</script>
</html>
2.用react做数组遍历
var names=['张飞','孙权','关羽','刘备']; ReactDOM.render( <ul> { names.map(function(el){ return <li key={el}>你好！ {el}!</li> }) } </ul>, document.getElementById('container') )