javascript 邮寄信封发件人和收件人

Posted 2021-05-03

class Person {
  constructor(name, address, city, state, zip) {
    this.name = name;
    this.address = address;
    this.city = city;
    this.state = state;
    this.zip = zip;
  }
}

const Bob = new Person(
  'Bob Jones',
  'some address',
  'some city',
  'some state',
  'some zip'
);
const Dwayne = new Person(
  'Dwayne Johnson',
  'another address',
  'another city',
  'another state',
  'another zip'
);

const Stamp = () => {
  return (
    <div className="stamp">
      <h2>Stamp</h2>
    </div>
  );
};

const AddressLabel = props => {
  const { name, address, city, state, zip } = props.person;
  return (
    <div>
      <p>{name}</p>
      <p>{address}</p>
      <p>
        {city}, {state} {zip}
      </p>
    </div>
  );
};

const Envelope = props => {
  const { fromPerson, toPerson } = props;
  return (
    <div className="envelope-container">
      <div className="envelope-top">
        <AddressLabel person={fromPerson} />
        <Stamp />
      </div>
      <div className="envelope-middle">
        <AddressLabel person={toPerson} />
      </div>
    </div>
  );
};

class App extends Component {
  render() {
    return (
      <div className="App">
        <Envelope fromPerson={Bob} toPerson={Dwayne} />
      </div>
    );
  }
}