写react的时候自己看一看

发布时间：2020-12-15 09:33:46 所属栏目：百科来源：网络整理

导读：写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‘)
    );

所以最后代码就出来了

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!