Question

当我尝试导入组件'deleteButton'时，编译器声称该类不存在。

我尝试使用导出默认值，并使用别名导入它。

import React from 'react';
import deleteButton from './Components/deleteButton';

const App: React.FC = () => {
  return (
    <deleteButton/>

  );
}

export default App;

import React from 'react';
import { confirmAlert } from 'react-confirm-alert';
import 'react-confirm-alert/src/react-confirm-alert.css';

export default class deleteButton extends React.Component {
  submit = () => {
    confirmAlert({
      title: 'Confirm to delete',
      message: 'Are you sure to delete this file?.',
      buttons: [
        {
          label: 'Yes',
          onClick: () => alert('File deleted')
        },
        {
          label: 'No',
          onClick: () => alert('Canceled')
        }
      ]
    });
  };
  render() {
    return (<div className='container'>
      <button onClick={this.submit}>Delete</button>
    </div>);
  }
}

预期输出应为HTML元素。编译器声称：类型“ JSX.IntrinsicElements”上不存在属性“ deleteButton”。 TS2339

Answer 1

您需要大写JSX-Elements，以便react可以区分自定义元素和内置元素（如span或div）。 Docs

如果将其写为小写，它将查找不存在的本机元素。因此，将名称更改为大写即可使用：

import DeleteButton from './Components/deleteButton';

希望这会有所帮助。编码愉快。

Answer 2

您应该指定返回类型。在render（）..

render(): ReactNode {
  return (
   ...
 )
}
``

Also, import the ReactNode from React itself like this,

Port React，来自“ react”的{ResctNode} ``|

如何包含带有react tsx导入的名称空间？

2 个答案: