时间戳

首页 > 解决方案 > 哪个是为 Flatlist 中的项目分配功能的更好方法

javascript - 哪个是为 Flatlist 中的项目分配功能的更好方法

问题描述

我想知道哪种方法是为React-NativeonPress中的项目分配功能的正确方法。FlatList我的导师为我解释过，也许我错过了 OOP 中“委托/关闭/块”定义的知识，我已经阅读了它，但直到现在我仍然无法自己弄清楚。这是细节：

我有一个名为Menu的屏幕——这个菜单有一个<FlatList>包含多个<MenuItem>，每个<MenuItem>都有一个切换按钮来“将项目添加到购物车”或“删除购物车的项目”（单击添加 - 再次单击以删除）。我分开<MenuItem>到另一个文件，所以我当前的文件夹树看起来像这样：

__Menu
|  |_MenuItem
|       |__index.js
|
|__index.js

这是我导师的方法：

他定义了一个名为_onToggleCartin的函数，Menu/index.js如下所示：

_onToggleCart = (selected) => {
    if(selected == false){
      this.props.addItemToCart()
    }else{
      this.props.removeItemFromCart()
    }
}

<FlatList
  data={data}
  initialNumToRender={6}
  extraData={this.state.data}
  keyExtractor={(item) => item.id}
  renderItem={({ item, index }) => <MenuItem item={item} isFinalItem={index == data.length - 1} navigation={navigation} onPress={this._onToggleCart} />}
/>

Menu/MenuItem/index.js看起来像这样：

...
const [selected, setSelected] = useState(false)
const { id, imgURL, name, desciption, total } = item

_onChangeCart = () => {
    setSelected(!selected)
    onPress(selected)
}
...
<TouchableOpacity>
  ...
    <TouchableWithoutFeedback onPress={this._onChangeCart}>
      ...
    </TouchableWithoutFeedback>
  ...
</TouchableOpacity>

这是我的方法：

在Menu/index.js我没有为 分配任何功能<MenuItem>，所以我没有功能_onToggleCart，也没有onPress道具。它看起来像这样：

<FlatList
  data={data}
  initialNumToRender={6}
  extraData={this.state.data}
  keyExtractor={(item) => item.id}
  renderItem={({ item, index }) => <MenuItem item={item} isFinalItem={index == data.length - 1} navigation={navigation} />}
/>

像这样Menu/MenuItem/index.js检查条件_onChageCart：

...
const [selected, setSelected] = useState(false)
const { id, imgURL, name, desciption, total } = item

_onChangeCart = () => {
    if(selected == false){
      this.props.addItemToCart()
    }else{
      this.props.removeItemFromCart()
    }
}
...
<TouchableOpacity>
  ...
    <TouchableWithoutFeedback onPress={this._onChangeCart}>
      ...
    </TouchableWithoutFeedback>
  ...
</TouchableOpacity>

谁能帮助我他们之间有什么不同，哪个更好？

标签： javascriptreact-native

解决方案

与您的组件和您的导师的主要区别在于他将onPress道具传递给MenuItem. 这有什么区别？

好吧，在您的示例中，如果您需要在MenuItem媒体上添加更多操作，您会怎么做？你不能这样做，但是你的导师做的方式，你可以添加更多的功能（调用一个更多的功能），MenuItem因为他调用props.onPress.

你的导师做了一个更灵活的组件，这可能会变得更容易，你的组件更固定。

哪个更好？现在这取决于您和您的项目结构。

推荐阅读