写react的时候悟道了一个小小的道理
就是写一个界面的时候先把思路理清,理的慢条斯理就对了
那么问题就来了怎么把思路理清楚呢先举个例子,比如要写这么一个界面
对就是这么简单的东西,按一下就切换
那么思路怎么来呢?
第一,先看整体
不就是上面一行显示文字
下面一个按钮么
那么第一步就是显示两个东西,一个是一行文字,一个是按钮
class MainDiv extends React.Component { render() { return ( <div> <Message /> <button> </button> </div> ); } } ReactDOM.render( <MainDiv/>, document.getElementById('example') );
整体构建出来了,那么下面就是显示具体的东西了
先想一下东西会动,那么还是按一下就动,那不就是和onClick有关吗?
然后就可以直接绑定onClick了
并且可以直接想到要是动态的那么必须的有 一个标志flag这个可以直接放在组件的state里
并且按钮里的内容也可以直接由flag来判断
class MainDiv extends React.Component { constructor(props) { super(props); this.state = { flag: true }; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState({ flag: !this.state.flag }); } render() { return ( <div> <Message flag={this.state.flag} /> <button onClick={this.handleClick}> {this.state.flag ? '登录': '退出'} </button> </div> ); } } function Message(props) { if(props.flag) { return ( <h1>Register</h1> ); } return ( <h1>Hello Welcome</h1> ); } ReactDOM.render( <MainDiv/>, document.getElementById('example') );
所以最后代码就出来了