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> ) }转载于:https://www.cnblogs.com/gujie-junlintianxia/p/9477744.html
相关资源：数据结构—成绩单生成器