最新在看react的時候發現,vue裏面的很多東西在react裏面都沒有,好多都要自己去實現,vue已經實現了很多我們經常用到的東西,react基本都要自己去寫,很靈活,賦予開發人員更多的空間,現在模擬一下v-if和v-show的實現方式。
效果圖如下:
父組件:
import React, { Component } from 'react';
// import logo from './logo.svg';
import style from './style';
import {Componet} from './componet.jsx';
import { withRouter } from 'react-router-dom';
export default class Slider extends Component {
constructor (props) {
super(props);
this.state = {
name: '',
flag: false,
flag01: false
};
}
// 子組件傳值
handleClick (msg, name) {
console.log(msg, name);
}
// if切換
toggle (flag) {
let isShow = !flag;
this.setState({
flag: isShow
});
}
// show 切換
toggleShow (flag) {
let isShow = !flag;
this.setState({
flag01: isShow
});
}
render () {
return(
<div>
<button onClick={this.toggle.bind(this, this.state.flag)}>v-if切換顯示</button>
<button onClick={this.toggleShow.bind(this, this.state.flag01)}>v-show切換顯示</button>
<Componet title="aaa" msg="12345" v-if={this.state.flag} v-show={this.state.flag01} onClick={this.handleClick.bind(this)}/>
</div>
);
}
componentWillMount () {
console.log(Componet);
}
}
子組件代碼:
import React, { Component } from 'react';
let name = 'zharternsga';
let msg = {
name: 'zhansgan',
age: 1212
};
export const Componet = (props) => {
console.log(props);
if (props['v-if']) {
let isShow = props['v-show'] ? 'none' : 'block';
return (
<ul onClick={props.onClick.bind(this, msg, name)} style={{display: isShow}} >
<li>${name}</li>
<li>${props.title}</li>
<li>${props.msg}</li>
<li>zhansgan</li>
</ul>
);
} else {
return (<div></div>);
}
};
剛接觸jsx不久,語法看起來確實很怪,但是用起來的時候就要自己去想思路去實現類型的效果,感覺比較有助有提升編程思維能力。