I realized a little truth when writing react
When writing an interface, we should first clarify the idea, and it will be right to be slow.
Then The question is how to clarify the idea? Let me give an example, such as writing such an interface
Yes, it’s such a simple thing, Click to switch
So how does the idea come about?
First, look at the whole first.
Isn’t it the upper line of text?
The next button?
Then the first step is to display Two things, one is a line of text, the other is a button
class MainDiv extends React.Component {
render() {
return (
);
}
}
ReactDOM.render(
,
document.getElementById(‘example‘)
);
The overall construction is completed, then the following is to show the specific things
First think about things will move, then Just click to move, isn’t that related to onClick?
Then you can directly bind onClick
And you can directly think that if it is dynamic, there must be a flag flag, which can be directly placed in the component’s state
< p>And the content of the button can also be judged directly by the 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 (
this.state.flag} />
);
}
}
function Message(props) {
if(props.flag) {
return (
Register
);
}
return (
Hello Welcome
);
}
ReactDOM.render(
,
document.getElementById(‘example‘)
);
So the final code comes out
class MainDiv extends React.Component {
render() {
return (
);
}
}
ReactDOM.render(
,
document.getElementById(‘example‘)
);
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 (
this.state.flag} />
);
}
}
function Message(props) {
if(props.flag) {
return (
Register
);
}
return (
Hello Welcome
);
}
ReactDOM.render(
,
document.getElementById(‘example‘)
);