reactjs - 如何在本机反应中将参考从父级传递给子级Touchable Opacity？

Question

我在父转换视图中有一个转换参考我想传入一个孩子：

const transition = (
  <Transition.Together>
    <Transition.In type="fade" durationMs={300} />
    <Transition.Change />
    <Transition.Out type="fade" durationMs={300} />
  </Transition.Together>
);
const FiltersModal: FC = () => {
const transitionRef = useRef<TransitioningView>(null);
return (
<FiltersContainer ref={transitionRef} transition={transition}>
 ...
{primaryFilters.map((primaryFilter, i) => (
    <FilterOption key={i} ref={transitionRef} label={primaryFilter}>
      {primaryFilter}
    </FilterOption>
  ))}

这是我在此处回答后的过滤器选项：ForwardRef error with typescript and react-native：

const FilterOption: React.ComponentType<FilterOptionProps> = React.forwardRef(
  ({ label }: FilterOptionProps, ref?: React.Ref<TransitioningView>) => {
    const [isSelected, setiIsSelected] = useState(false);
    const onPress = () => {
      if (ref.current) ref.current.animateNextTransition();
      setiIsSelected((prevIsSelected) => !prevIsSelected);
    };
    if (isSelected) return null;
    return (
      <Button>
        <Typography
          {...{
            fontFamily: FONTS_MONTSERRAT_500,
            fontWeight: 500,
            fontSize: 14,
            fontStyle: "normal",
            lineHeight: 20,
            color: "#00B0F0",
          }}
        >
          {label}
        </Typography>
        <AntDesign name="plus" color="#00b0f0" size={10} />
      </Button>
    );
  }
);

但我有这个警告，不能参考 ref.current.:

Type 'ForwardRefExoticComponent<Pick<FilterOptionProps, "label"> & RefAttributes<TransitioningView>>' ....

我如何在原生 + 打字稿的 touchableOpacity 中使用 forwardref？

标签： reactjstypescriptreact-native

Answer 1

这对我有用：

interface FilterOptionProps {
  label: string;
} 

const FilterOption: React.ForwardRefExoticComponent<
  FilterOptionProps & React.RefAttributes<TransitioningView>
> = React.forwardRef(({ label }, ref) => {
...

if((ref as React.RefObject<TransitioningView>).current)
(ref as React.RefObject<TransitioningView>).current.animateNextTransition()