react

import React, { Component } from "react";
import logo from "../assets/images/logo192.png";

class Home extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: "张三",
      title: "title",
      color: "red",
      style: {
        fontSize: "30px",
      },
      list1: ["111", "222", "333"],
      list2: [<h2>我是h1</h2>, <h2>我是h2</h2>],
    };
  }
  render() {
    const listResult = this.state.list1.map(function (value, key) {
      return <li key={key}>{value}</li>;
    });
    return (
      <div>
        <p className="red">home</p>
        <p title={this.state.title}>{this.state.name}</p>
        <label htmlFor="name" style={this.state.style}>
          name
        </label>
        <input id="name"></input>
        <br />
        <img src={logo} alt="aa" />
        <img src={require("../assets/images/logo192.png")} alt="aa" />
        <br />
        <ul>{listResult}</ul>
        <br />
        {this.state.list2}
        <br />
        {this.state.list1.map(function (value, key) {
          return <li key={key}>{value}</li>;
        })}
      </div>
    );
  }
}

export default Home;