Reactjs-Popup：无法读取未定义的属性（读取 'forwardRef'）

Question

我正在尝试使用以下文档：https://react-popup.elazizi.com/component-api/ 但总是显示以下错误：无法读取未定义的属性（读取'forwardRef'）。我不知道如何让这个弹出窗口监听 const Custombutton，如何让它监听值？

这里的组件相当简单：

import { React, useState } from "react";
import { ErrorMessage, useField } from "formik";
import { StyledTextInput, StyledLabel, StyledIcon, ErrorMsg } from "./Styles";

// Eye for password
import { FiEyeOff, FiEye } from "react-icons/fi";
import Popup from "reactjs-popup";

export const TextInput = ({ icon, ...props }) => {
  const [field, meta] = useField(props);
  const [showpass, setShowpass] = useState(false);
  //const [showPopup, setShowPopup] = useState(false);

  const CustomButton = React.forwardRef(({ open, ...props }, ref) => (
    <button className="button" ref={ref} {...props}>
      Trigger - {props.open ? "Opened" : "Closed"}
    </button>
  ))

  return (
    <div style={{ position: "relative" }}>
      <StyledLabel htmlFor={props.name}>{props.label}</StyledLabel>
      {props.type !== "password" && (
        <StyledTextInput
          invalid={meta.touched && meta.error}
          {...field}
          {...props}
        />
      )}
      {props.type === "password" && (
        <StyledTextInput
          invalid={meta.touched && meta.error}
          {...field}
          {...props}
          type={showpass ? "text" : "password"}
        />
      )}
      <StyledIcon>{icon}</StyledIcon>
      {props.type === "password" && (
        <StyledIcon onClick={() => setShowpass(!showpass)} right>
          {showpass && <FiEye />}
          {!showpass && <FiEyeOff />}
        </StyledIcon>
      )}
      {meta.touched && meta.error ? (
        <ErrorMsg>{meta.error}</ErrorMsg>
      ) : (
        <ErrorMsg style={{ visibility: "hidden" }}>.</ErrorMsg>
      )}
      
      <Popup
        trigger={(open) => <CustomButton open={open} />}
        position="right center"
        closeOnDocumentClick
      >
        <span> Popup content </span>
      </Popup>
      ;
    </div>
  );
};

Answer 1

您应该尝试修改 React 导入：

import React, { useState } from 'react';

见https://reactjs.org/docs/react-api.html

Reactjs-Popup：无法读取未定义的属性（读取 'forwardRef'）

Reactjs-Popup: Cannot read properties of undefined (reading 'forwardRef')

reactjs

reactjs-popup