React Native 之下封装城市选择组件（二）—— 步入正轨

2023-11-13 13:18:40

导语

大家好，我是你们的技术达人 XX。在上一期文章中，我们已经完成了封装城市选择组件的第一步：框架搭建和数据获取。而今天，我将继续完成该组件的封装，主要是把暴露的接口写完。完成之后，我会进一步完善，并在项目中进行测试。如果一切顺利的话，我会将组件上传到 npm，供大家学习和使用。当然，如果大家有更好的封装方式，也欢迎一起来交流学习。

组件封装

暴露接口

首先，我们需要暴露一些接口，以便外部可以调用我们的组件。这些接口主要包括：

data：必传参数，是一个包含所有城市数据的数组。
value：可选参数，是当前选中的城市。
onChange：可选参数，当城市发生改变时触发的回调函数。

完善组件逻辑

暴露了接口之后，我们需要完善组件的逻辑。这里主要包括：

当 data 发生变化时，我们需要重新生成城市列表。
当 value 发生变化时，我们需要更新组件的状态。
当 onChange 回调函数被触发时，我们需要调用该函数。

测试组件

在完成组件的逻辑之后，我们需要进行测试，以确保组件能够正常工作。我们可以创建一个简单的测试用例，来模拟用户操作组件。

应用示例

在完成组件的封装之后，我们可以将其应用到实际项目中。这里我提供了一个简单的应用示例：

import React, { useState } from 'react';
import CityPicker from './CityPicker';

const App = () => {
  const [value, setValue] = useState('');

  const onChange = (value) => {
    setValue(value);
  };

  return (
    <div>
      <CityPicker data={data} value={value} onChange={onChange} />
    </div>
  );
};

export default App;