React组件实战：从基础到进阶

原创

于 2025-09-15 10:01:09 发布 · 847 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#React # 组件开发 # 状态管理

1、创建一个 AddressLabel 组件，该组件接收一个人员对象作为属性，并按如下格式渲染其姓名和地址：全名 123 虚假街波士顿，马萨诸塞州 02118

以下是一个简单的 React 代码示例来创建 AddressLabel 组件：

import React from 'react';
const AddressLabel = (props) => {
  const person = props.person;
  return (
    <div>
      {person.name}
      <br />
      {person.address.street}
      <br />
      {person.address.city}, {person.address.state} {person.address.zip}
    </div>
  );
};

使用示例

const person = {
  name: 'Full Name',
  address: {
    street: '123 Fake St.',
    city: 'Boston',
    state: 'MA',
    zip: '02118'
  }
};
const App = () => {
  return (
    <AddressLabel person={person} />
  );
};
export default App;

2、创建一个Envelope组件，该组件接受toPerson和fromPerson作为属性，并使用一个自定义的AddressLabel组件来显示回邮地址和收件人地址。确保也要包含一个邮票！示例地址信息为：发件人：Mr. Sender，地址：123 Fake St.，Boston, MA 02118；收件人：Mrs. Receiver，地址：123 Fake St.，San Francisco, CA 94101；显示邮票标识“STAMP”。

以下是实现该需求的示例代码：

import React from 'react';
// 自定义的AddressLabel组件
function AddressLabel({ person }) {
  return (
    <div>
      {person.name}
      <br />
      {person.address.street}
      <br />
      {person.address.city}, {person.address.state} {person.address.zip}
    </div>
  );
}

// Envelope组件
function Envelope({ toPerson, fromPerson }) {
  return (
    <div>
      <div style={
  
  { marginBottom: '20px' }}>
        <AddressLabel person={fromPerson} />
      </div>
      <div>
        <AddressLabel person={toPerson} />
      </div>
      <div style={
  
  { marginTop: '20px', textAlign: 'right' }}>
        STAMP
      </div>
    </div>
  );
}

// 使用示例
const fromPerson = {
  name: 'Mr. Sender',
  address: {
    street: '123 Fake St.',
    city: 'Boston',
    state: 'MA',
    zip: '02118'
  }
};
const toPerson = {
  name: 'Mrs. Receiver',
  address: {
    street: '123 Fake St.',
    city: 'San Francisco',
    state: 'CA',
    zip: '94101'
  }
};
const App = () => {
  return (
    <div>
      <Envelope toPerson={toPerson} fr