版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/CodingNoob/article/details/86693591
最新在看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不久,语法看起来确实很怪,但是用起来的时候就要自己去想思路去实现类型的效果,感觉比较有助有提升编程思维能力。