javascript 掌握反应 - 组件（代码与莫什）

Posted 2021-05-03

import React, { Component } from "react";

class Counter extends Component {
  render() {
    return (
      <React.Fragment> //Will not need to have a div within the 'root' div
        <h1>Hello World</h1>
        <button>Increment</button>
      </React.Fragment>
    );
  }
}

export default Counter;

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0,
  };

  render() {
    return (
      <div>
    	<span>{this.formatCount()}</span>
    	<button>Increment</button>
      </div>
    );
  }
  
  formatCount(){
  	const {count} = this.state; //Object destructuring
  	return count === 0 > <h1>Zero</h1> : count;
  }
}

export default Counter;

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0,
    imageUrl: 'https://picsum.photos/200'
  };

  styles={
  	fontSize: 50,
  	fontWeight: 'bold'
  };

  render() {
    return (
      <div>
    	<img src={this.state.imageUrl} alt='' />
    	
        <span style={this.styles} className='badge badge-primary m-2'>
        	{this.formatCount()}
        </span>
        <span style={ {fontSize:30}} className='badge badge-primary m-2'>
        	{this.formatCount()}
        </span> //Inline Style
        
        <button className='btn btn-secondary btn-sm'>Increment</button>
      </div>
    );
  }
  
  formatCount(){
  	const {count} = this.state;
  	return count === 0 > <h1>Zero</h1> : count;
  }
}

export default Counter;

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0,
  };

  render() {
    return (
      <div>
        <span className={this.getBadgeClasses()}>
        	{this.formatCount()}
        </span>
      
        <button className='btn btn-secondary btn-sm'>Increment</button>
      </div>
    );
  }
  
  getBadgeClasses(){
  	let classes='badge m-2 badge-'
  	classes += this.state.count === 0 ? 'warning' : 'primary'
  	return classes
  }
  
  formatCount(){
  	const {count} = this.state;
  	return count === 0 > <h1>Zero</h1> : count;
  }
}

export default Counter;

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0,
    tags: ["tag1", "tag2", "tag3"]
  };

  render() {
    return (
      <div>
        <span className={this.getBadgeClasses()}>
        	{this.formatCount()}
        </span>
      
        <button className='btn btn-secondary btn-sm'>Increment</button>
        
        <ul>{this.state.tags.map(tag => <li key={tag}> {tag} </li>}</ul>
      </div>
    );
  }
  
  getBadgeClasses(){
  	let classes='badge m-2 badge-'
  	classes += this.state.count === 0 ? 'warning' : 'primary'
  	return classes
  }
  
  formatCount(){
  	const {count} = this.state;
  	return count === 0 ? <h1>Zero</h1> : count;
  }
}

export default Counter;

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0,
    tags: ["tag1", "tag2", "tag3"]
  };

  renderTags() {
    if (this.state.tags.length === 0) return <p>There are no tags!</p>;

    return (
      <ul>
        {this.state.tags.map(tag => (
          <li key={tag}>{tag}</li>
        ))}
      </ul>
    );
  }

  render() {
    return (
      <div>
        {this.state.tags.length === 0 && "Please Create a new tag!"}
        {this.renderTags()}
      </div>
    );
  }
}

export default Counter;

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0
  };

  // constructor() {
  //   super();
  //   this.handleIncrement = this.handleIncrement.bind(this);
  // }

  handleIncrement = () => {
    console.log("Increment Clicked", this);
  };

  render() {
    return (
      <div>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>

        <button
          onClick={this.handleIncrement}
          className="btn btn-secondary btn-sm"
        >
          Increment
        </button>
      </div>
    );
  }

  getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? <h1>Zero</h1> : count;
  }
}

export default Counter;

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0
  };

  // constructor() {
  //   super();
  //   this.handleIncrement = this.handleIncrement.bind(this);
  // }

  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>

        <button
          onClick={this.handleIncrement}
          className="btn btn-secondary btn-sm"
        >
          Increment
        </button>
      </div>
    );
  }

  getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }
}

export default Counter;

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0
  };

  // constructor() {
  //   super();
  //   this.handleIncrement = this.handleIncrement.bind(this);
  // }

  handleIncrement = product => {
    console.log(product);
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>

        <button
          onClick={() => this.handleIncrement({ id: 1 })} //Use the map method  to pass a list
          className="btn btn-secondary btn-sm"
        >
          Increment
        </button>
      </div>
    );
  }

  getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }
}

export default Counter;