Question

我想让我的 flatlist 可重复使用，但我在传递道具时遇到了一些困难。

可重用组件的代码

const ListItemView = function (props) {
  console.log(props);
  return (
    <View>
      <FlatList
        //data={props.data}
        keyExtractor={props.keyp}
        renderItem={props.disptext}
      />
    </View>
  );
};

当我在道具上运行 console.log 时，我得到了这个

{"disptext": undefined, "keyp": [函数匿名]}

这就是我从父屏幕传递道具的方式

const keyf = () => {
    console.log('keyf');
    //for the key extractor
    return (item => item.index);
  };
  const rendertext = () => {
    console.log('rendertext');
    //for rerender function of the flatlist
    ({ item }) => {
      return (
        <View>
          <Text>holaa</Text>
          <Text>{item.name}</Text>
        </View>
      );
    }
  };
  return (
    <View style={style.container}>

      <ListItemView
        //data={con}
        keyp={keyf()}
        disptext={rendertext()}
      />
    </View>
  );
};

请帮忙

Answer 1

您正在直接调用该函数，但您只需要提供它的引用...以便仅在某些事件上调用它。应该是这样的：

      <ListItemView
        //data={con}
        keyp={keyf}
        disptext={rendertext}
      />

或

 <ListItemView
        //data={con}
        keyp={()=>keyf()}
        disptext={()=>rendertext()}
      />

如何使 flatelist 成为可重用的组件

1 个答案: