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

    所以最后代码就出来了

  • 相关阅读:
    ABAP-FI-Redirection of read accesses from ANEA to FAAV_ANEA failed
    招聘
    五分钟教你在长沙如何找到靠谱的驾校和教练(长沙找驾校)
    数组哪些方法能改变原数组,以及循环改变数组的情况
    FXGL游戏开发-JavaFX游戏框架
    tempermonkey.d.ts | 油猴函数类型
    post导出文件
    mescroll.js 使用
    查看托管应用池用法
    IDEA配置
  • 原文地址:https://www.cnblogs.com/WildSky/p/11263529.html
Copyright © 2011-2022 走看看