react 有类似于vue指令的方法：
1.类似于v-text:
export default class App extends Component{
render(){
let message = 'hello react';
return (
<div>{message}</div>
)
}}
2.类似于v-html
export default class App extends Component{
render(){
let message = <h1>hello react</h1>;
let list = [<li key="1">item1</li>,<li key="2">item2</li>,<li key="3">item3</li>];
return (
<div>{list}</div>
)
}}
3.类似于v-show:
export default class App extends Component{
render(){
let isShow = true;
return <div id="box" style={{display: isShow?'':'none'}}></div>
}}
4.类似于v-if：
export default class App extends Component{
render(){
let isShow = true;
return isShow ? <div id="box"></div> : null;
// return isShow && <div id="box"></div>;
}
}
5.类似于v-for：
render(){
let arr = ['a', 'b', 'c', 'd', 'e', 'f'];
// let newArr = arr.map((item, index)=>{
// return <li key={index}>{item}</li>
// })
let newArr = [];
for(var i = 0; i < arr.length; i++){
newArr.push(<li key={i}>{arr[i]}</li>);
}
// return (
// <ul>
// {newArr}
// </ul>
// );
// return (
// <ul>
// {arr.map((item, index)=>{
// return <li key={index}>{item}</li>
// })}
// </ul>
// );
return (
<ul>
{(function(){
let newArr = [];
for(var i = 0; i < arr.length; i++){
newArr.push(<li key={i}>{arr[i]}</li>);
}
return newArr;
})()}
</ul>
)
}
6.类似于v-bind
render(){
let aPath = 'https://www.baidu.com/';
let imgPath = 'https://www.baidu.com/img/bd_logo1.png?where=super';
return (
<div
id="box"
className="box red"
style={{background: 'yellow',
border: '1px solid #ddd',
marginTop: '20px'}}>
<a href={aPath}>百度一下</a>
<img src={imgPath}/>
</div>
)
}