javascript - 如何使用 React.forwardRef(); 和 JSX 的点表示法

Question

我尝试导出为默认组件，但出现错误。我在这里也遇到了类似的问题，但我不懂打字稿语法

应用输入组件

    const CustomInput = {
       AppInput: function AppInput(props) {
         return <TextField id={id} {...props} />
       },
   
       // Another method exported as a named import
       MetricInput: function MetricInput(props) {
         return ( 
           <FormControl className="form-control">
             <Input {...props} />
           </FormControl>   
         );
       }
    };
            
    export function MetricInput(props) {
     return <CustomInput.MetricInput {...props} />;
    };
    
    function AppInput(props, ref) {
      props = { ...props, ref };
      return <CustomInput.AppInput {...props} />;
    };

    const InputEL = React.forwardRef(AppInput);

带导入的组件

   import InputEl from "../common/CustomInput/";
    //! ref from the root component was passed successfully
   const DrugDosage = ({ handleKeydown}, ref) => {
  
      return( 
         <InputEl
         ref={ref}
         name="dsgStatem"
         className="col-12"
         onKeyDown={handleKeydown}
         id="drug_dsg_long"
         required
        />
      )
    } 
    const DrugDosageRef = React.forwardRef(DrugDosage);
    export default DrugDosageRef;

这是错误

标签： javascriptreactjs