Case analysis of JSX and react events in react learning

Time:2020-10-30

This paper describes the JSX and react events of react learning. For your reference, the details are as follows:

1、JSX

1

JSX is used to describe HTML pages in react, and it can be mixed with JS. When using JavaScript expression, the expression should be enclosed in curly brackets

const user = {
 firstName: 'Harper',
 lastName: 'Perez'
};
Const element = (// save JSX statement in variable
 <h1>
  Hello, {formatname (user)}! {/ * {} write JS statement * /}
 </h1>
);

After compilation, JSX is actually converted into a common JavaScript object, which can be assigned a value or passed as a parameter

ReactDOM.render(
 Element, // render the react node through the JSX variable
 document.getElementById('root')
);

1.2 properties

JSX can use the “string” attribute as in HTML, or the {expression} attribute


const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;

be careful:

1. React DOM uses camelCase hump naming to define the name of an attribute, rather than the attribute name of HTML. For example, change the font size to fontsize.

2. Reserved words in HTML cannot be used in JS, for example, class, should be changed to classname:


const ele= <div className="red">Red Color</div>

3. The inline style in JSX needs to be returned with an object instead of a string:

const ele=<div style=" color:red "> Red < / div > // an error will be reported
const ele= <div style={{color:'red'}}>Red</div>

* color:red }}The first curly bracket in represents that this is a JS expression, and the second represents that this is an object caused by braces

1.3 nesting

If the JSX tag is closed, you need to use / >:


const element = <img src={user.avatarUrl} />;

When jjsx contains multiple tags, it is necessary to wrap them with a div on the outermost side when returning


const element = (
 <div>
  <h1>Hello!</h1>
  <h2>Good to see you here.</h2>
 </div>
);

1.4 notes

Comments in JSX should be on a single line and wrapped in curly braces, for example: {/ * comment * /}. Otherwise, it may be treated as normal text and cause errors.

2. Events

The binding of react event is written in humponClick={this.function}

For example, define a function shift flag to switch on / off

class Toggole extends React.Component{
 constructor(props){
  super(props);
  this.state={
   flag:true
  };
  this.shiftFlag=this . shiftFlag.bind (this); // the shift flag function binds this
 }
 shiftFlag(e){
  e.preventDefault();
  this.setState({
   flag:!this.state.flag
  });
 }
 render(){
  return <a href="#" rel="external nofollow" onClick={this.shiftFlag}>{this.state.flag?'ON':'OFF'}</a>
 }
}

Note:

1. Class’s method does not bind this by default. If this is used directly in the method shiftflag, an error will be reported that this is undefined. Therefore, this needs to be bound for the shift flag.

2. E is an event parameter. Use the E. preventdefault() method to prevent the default jump behavior of a tag.

The transfer of react event parameter is realized by binding. When passing, the bound this is first and the parameter is after. When defining a function, the event object e should be placed at the end. For example, define a setname function and modify the name as the parameter passed in

class Name extends React.Component{
 constructor(props){
  super(props);
  this.state={
   name:'default'
  }
 }
 Setname (name, e) {// event E is placed last
  this.setState({
   name:name
  })
 }
 render(){
  return <button onClick={this.setName.bind(this,'tory')}>{this.state.name}</button>
 }
}

I hope that this paper will be helpful to the design of react program.