当组件使用redux compose时如何导入React惰性 - 与“IntrinsicAttributes”类型没有共同的属性

Question

有如下所示的组件结构是从 redux 中使用 compose 导出的。

TestInspector.tsx

export interface TestInspectorProps {
  closeInspector: () => void;
  onExpand: () => void;
  isFullScreen: boolean;
  selectedTest:any;
}
const TestInspector = (props : TestInspectorProps)=>{
.
.
.
.
.
return{<>....</>}

}

const mapStateToProps ={
.....
}

const mapPropsToConfigs = {
.....
}

export default compose<any>(connect(mapStateToProps), connectRequest(mapPropsToConfigs))(TestInspector);

我需要延迟加载这个TestInspector。

App.tsx*

const TestInspector = lazy(() => import('./inspectors/TestInspector/TestInspector'));

const App = ()=>{

const testProps = {
        closeInspector: ***somefunction***,
        onExpand: ***somefunction***,
        isFullScreen:true,
        selectedTest: ***somedata***,
      };

return <TestInspector {...testProps}></TestInspector> ***getting error here ***
}

app.tsx 中的错误如下

键入 '{ closeInspector: () => void; onExpand: () => void;是否全屏：布尔值；选定的测试：任意； }' 与类型“IntrinsicAttributes”没有共同的属性。

如何解决这个问题。

Answer 1

在使用 TypeScript 的 React 中，IntrinsicAttributes 是一个接口，React 自动将其包含为每个 JSX 元素的 props 的一部分。它表示所有 JSX 元素共有的内置属性，例如 key 和 ref。 https://www.dhiwise.com/post/the-ultimate-guide-to-react-intrinsicattributes

所以你的道具不正确。

// TestInspector.tsx
import React from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { connectRequest } from 'some-library'; // adjust this import based on your project

export interface TestInspectorProps {
  closeInspector: () => void;
  onExpand: () => void;
  isFullScreen: boolean;
  selectedTest: any;
}

const TestInspector: React.FC<TestInspectorProps> = (props) => {
  const { closeInspector, onExpand, isFullScreen, selectedTest } = props;

  return (
    <div>
      {/* Your component JSX here */}
    </div>
  );
};

const mapStateToProps = (state: any) => ({
  // map your state to props
});

const mapPropsToConfigs = {
  // map your props to configs
};

export default compose<any>(
  connect(mapStateToProps),
  connectRequest(mapPropsToConfigs)
)(TestInspector);


// App.tsx
import React, { Suspense, lazy } from 'react';

const TestInspector = lazy(() => import('./inspectors/TestInspector/TestInspector'));

const App = () => {
  const somefunction = () => {
    // Define your function logic here
  };

  const somedata = {
    // Define your data here
  };

  const testProps = {
    closeInspector: somefunction,
    onExpand: somefunction,
    isFullScreen: true,
    selectedTest: somedata,
  };

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <TestInspector {...testProps} />
    </Suspense>
  );
};

export default App;