react常用的方法
发布时间：2020-12-15 20:25:23 所属栏目：百科 来源：网络整理
导读：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 mess
|
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>
)
}
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |