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

所以最后代码就出来了

写react的时候自己看一看

猜你喜欢