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

Question

我想知道分配 onPress 的正确方法是什么？ FlatList 的函数React-Native 中的项目。我的导师向我解释说，也许我错过了OOP中“委托(delegate)/闭包/ block ”定义的知识，我已经看过它但是直到现在我仍然无法自己弄清楚。这是细节:

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

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

这是我导师的方法:

他定义了一个名为_onToggleCart的函数在 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 Prop 。它看起来像这样:

<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>

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

Answer 1

你的组件和你的导师的主要区别在于他将 onPress 属性传递给 MenuItem。这有什么区别？

那么，在您的示例中，如果您需要在 MenuItem 按下时添加更多操作，您会怎么做？你做不到，但是按照你的导师的做法，你可以向 MenuItem 添加更多功能(再调用一个函数)，因为他调用了 props。 onPress。

你的导师做了一个更灵活的组件，也许可以更容易地增长，你的组件更固定。

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