使用JSX 建立 Markup 组件风格开发的示例（前端组件化）

2023年6月10日下午5:05 • JavaScript

使用JSX可以方便地创建组件化的前端开发结构。本攻略将从以下几个方面详细讲解如何使用JSX建立Markup组件风格开发。

1. Markup组件风格开发基础

1.1 安装必要的软件包

在开始之前，需要安装具备Node.js以及npm包管理工具的计算机环境。安装完成后，使用npm安装React和React DOM包。

npm install react react-dom

1.2 创建基础环境

在开始创建组件前，需要创建基础的环境。在项目根目录下创建一个名为index.html的文件，然后在其中添加以下代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>React App</title>
</head>

<body>
    <div id="root"></div>
    <script src="index.js"></script>
</body>

</html>

创建一个名为index.js的文件，其中可以开始写React代码。

1.3 创建组件

在开始写React代码之前，需要知道如何创建React组件。React组件可以是函数或者类，需要遵循ES6规范，以及React组件的命名规范。以下是一个示例如何创建React组件。

function Greeting(props) {
  return <div>Hello, {props.name}</div>;
}

const element = <Greeting name="Conan" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

在以上示例中，我们创建了一个Greeting组件，该组件需要传入props对象，其中包含参数name。在ReactDOM.render中，我们使用了这个组件，并传入属性name为“Conan”，最终将渲染结果挂载到了id为root的DOM元素中。

2. 组件化

使用React的重要目的之一就是实现组件化开发。下面将举两个例子说明如何使用JSX建立Markup组件风格开发。

2.1 渲染一个简单的列表

以下示例展示了如何使用JSX创建一个简单的列表组件。

const Item = ({ item }) => (
  <li>{item.name} - {item.price}</li>
);

const List = ({ items }) => (
  <ul>
    {items.map(item => <Item key={item.id} item={item} />)}
  </ul>
);

const items = [
  { id: 1, name: 'Item 1', price: 5.99 },
  { id: 2, name: 'Item 2', price: 6.99 }
];

ReactDOM.render(<List items={items} />, document.getElementById('root'));

在以上代码中，我们创建了两个组件，一个是Item组件，用于渲染单个列表项，一个是List组件，用于渲染整个列表。作为props，Item组件接收一个对象，包含一个名为item的属性。List组件接收一个对象，其中包含一个名为items的属性，该属性的值为一个包含商品信息的数组。

在List组件中，我们使用了JavaScript的Array.map()方法遍历items数组中的每一个元素，并通过Item组件渲染每一个元素。

2.2 带有条件渲染的组件

React组件还可以做到条件渲染，根据传递进来的参数动态调整显示或隐藏的内容。以下示例展示了如何使用JSX创建一个带有条件渲染的组件。

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.handleToggleClick = this.handleToggleClick.bind(this);
    this.state = {showWarning: true};
  }

  handleToggleClick() {
    this.setState(prevState => ({
      showWarning: !prevState.showWarning
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
        <WarningBanner warn={this.state.showWarning} />
      </div>
    );
  }
}

ReactDOM.render(<Page />, document.getElementById('root'));

在以上示例中，我们创建了两个组件，一个是WarningBanner组件，用于渲染警告信息，一个是Page组件，用于控制WarningBanner组件的显示和隐藏。

在WarningBanner组件中，我们判断了props中的warn属性是否为true，如果是，则渲染警告信息，否则返回null。

在Page组件中，我们定义了一个状态对象showWarning，用于存储WarningBanner组件是否显示的状态，默认为true。在handleToggleClick方法中，我们更新了showWarning状态的值，以达到控制WarningBanner组件显示/隐藏的目的。在render方法中，我们根据showWarning状态的值动态渲染警告信息。同时，我们给Page组件渲染了一个按钮，用于控制WarningBanner组件的显示/隐藏。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用JSX 建立 Markup 组件风格开发的示例（前端组件化） - Python技术站