从子组件触发父组件的方法 - 反应

Question

我有一个带有打开和关闭功能的可滑动组件，我想从该组件的子组件中触发。我不认为在这种情况下使用状态来执行此操作是正确的，因为我想避免在可滑动组件设置动画时重新渲染（如果我错了请纠正我）。

我正在使用 react-native-gesture-handler/swipeable 并以他们为榜样 here

刷卡组件

import React, { useRef } from 'react';

import { RectButton } from 'react-native-gesture-handler';
import Swipeable from 'react-native-gesture-handler/Swipeable';
import Animated from 'react-native-reanimated';
const AnimatedView = Animated.createAnimatedComponent(View);

export const SwipeCard = ({ children }) => {
  let swipeableRow = useRef(null);

  let renderRightActions = (_progress, dragX) => {
    let scale = dragX.interpolate({
      inputRange: [-80, 0],
      outputRange: [1, 0],
      extrapolate: 'clamp',
    });
    return (
      <RectButton style={styles.rightAction} onPress={close}>
        {/* Change it to some icons */}
        <AnimatedView style={[styles.actionIcon]} />
      </RectButton>
    );
  };

  let close = () => {
    swipeableRow?.close();
  };

  let open = () => {
    swipeableRow?.openRight();
  };

  return (
    <Swipeable
      ref={swipeableRow}
      renderRightActions={renderRightActions}
      friction={2}
      rightThreshold={40}
    >
      {children}
    </Swipeable>
  );
};

下面是我使用 SwipeCard 的组件，Toggle 是我想用来触发 SwipeCard 组件中的 open() 方法的事件。

<Row>
    {arr.map((item) => {
      return (
        <SwipeCard key={item.id}>
          <CardContainer>
            <CleaningCard
              cleaningData={item}
            />
            <Toggle onPress={() => {}}>
              <Icon name="dots" />
            </Toggle>
          </CardContainer>
        </SwipeCard>
      );
    })}
  </Row>

Answer 1

您可以使用渲染道具模式并将 close、open 作为参数传递。

使用SwipeCard的父组件：

<Row>
  {arr.map((item) => {
    return (
      <SwipeCard key={item.id}>
        {({ close, open }) => (
          <CardContainer>
            <CleaningCard cleaningData={item} />
            <Toggle
              onPress={() => {
                // close()/open()
              }}
            >
              <Icon name="dots" />
            </Toggle>
          </CardContainer>
        )}
      </SwipeCard>
    );
  })}
</Row>;

SwipeCard 分量：

<Swipeable
  ref={swipeableRow}
  renderRightActions={renderRightActions}
  friction={2}
  rightThreshold={40}
>
  {children({close, open})}
</Swipeable>

我们只是让 children 成为一个接受对象和 returns JSX 的函数。所需对象作为参数传递 (children({close, open}))。

从子组件触发父组件的方法 - 反应

Trigger method on parent component from child component - react

reactjs

react-native

react-native-gesture-handler