Look at it when you write React

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

share picturesShare a picture

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

Leave a Comment

Your email address will not be published.