zoukankan      html  css  js  c++  java
  • 写react的时候自己看一看

    写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')
        );

    所以最后代码就出来了

  • 相关阅读:
    Pausing Coyote HTTP/1.1 on http-8080
    网站后台管理中生成首页失败
    Eclipse快捷键集结
    电子商务网站推广10大方法
    Eclipse使用
    注册表中更换桌面背景
    网站卡死,照惯例运行.bat批量处理文件进行重启不起作用
    同时处理html+js+jquery+css的插件安装(Spket&Aptana插件安装)
    JQuery的插件
    Eclipse插件
  • 原文地址:https://www.cnblogs.com/WildSky/p/11263529.html
Copyright © 2011-2022 走看看